CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

stig69 Nybegynder

25. juli 2008 - 15:17 Der er 14 kommentarer og
1 løsning

odd / even klassetildeling i en tabel

Javascript er ikke min stærke side og jeg har lånt nedestående script

Scriptet tildeler hveranden række i en tabel med klasserne hhv. odd og even. Mit problem opstår hvis der eksisterer mere end en tabel på siden: tælleren fortsætter og registrerer ikke en ny tabel.

Hvorledes udvide jeg scriptet, så tælleren begynder forfra ved ny tabel?

window.onload = oddevenrows

function oddevenrows() {
var tr = document.getElementsByTagName('tr');
var count = tr.length;
for (var i=0;i<count;i++) {
tr[i].className = (i%2) ? 'even' : 'odd';
}
}

Mvh

Stig

Synes godt om

Slettet bruger

25. juli 2008 - 15:39 #1

Du skal gennemløbe alle tabeller. For hver tabel skal du gennemløbe alle tr:

window.onload = oddevenrows

function oddevenrows() {
var table = document.getElementsByTagName('table');
var tableCount = table.length;
for (var i=0;i<tableCount;i++) {
var tr = table[i].getElementsByTagName('tr');
var trCount = tr.length;
for (var t=0;t<trCount;t++) {
tr[t].className = (t%2) ? 'even' : 'odd';
}
}
}

/1

Synes godt om

w13 Novice

25. juli 2008 - 18:19 #2

Og denne linje:

window.onload = oddevenrows

skal vel lige afsluttes af et semikolon:

window.onload = oddevenrows;

Synes godt om

roenving Novice

25. juli 2008 - 23:18 #3

-- jeg vil abbsolut anbefale, at man afslutter statements i javascript med semikolon, men så længe der er linjeskift er det faktisk ikke nødvendigt !-)

Synes godt om

olebole Juniormester

26. juli 2008 - 15:40 #4

<ole>

Til gengæld er det sjældent særlig godt performende at skifte klassenavn på elementer. Mon ikke der er andre muligheder? =)

/mvh
</bole>

Synes godt om

roenving Novice

28. juli 2008 - 00:10 #5

Hvis man gør det een gang, når dokumentet initialiseres er skaden dog stærkt begrænset !-)

Synes godt om

stig69 Nybegynder

28. juli 2008 - 09:49 #6

Tak for alle jeres svar. Jeg vil teste løsningen i løbet af i dag.

@olebole: Kunne du uddybe dit svar. Jeg er ikke helt med.

Synes godt om

w13 Novice

28. juli 2008 - 10:34 #7

Linjen:

tr[i].className = (i%2) ? 'even' : 'odd';

skifter class på dine elementer, og den funktion er vist meget dårligt implementeret i IE.

Synes godt om

stig69 Nybegynder

28. juli 2008 - 14:02 #8

det fungerede jo fint. Tak for hjælpen og svar!

Synes godt om

olebole Juniormester

28. juli 2008 - 17:56 #9

Hvordan det fungerer lige netop i din sitation er i princippet ligemeget ... der er tale om dårlig kodestil!

Der er ikke tale om et IE fænomen, men en ganske indlysende følgevirkning af CSS' opbygning:

Ændrer man borderStyle, color og fontWeight på et elements style objekt, har det ikke indflydelse for arvehierakiet under det pågældende element.

Ændrer man derimod klassen på elementet, ændres en større eller mindre del af dokumentets arvehieraki - og det kan naturligvis have enorme styling konsekvenser for alle child elementer - og deres child elementer - osv! Ikke sjældent opgiver browseren og genberegner hele dokumentet fra top til bund.

Jo færre ting, der skal overvejes, når man skriver sin kode, jo bedre bliver resultatet - og jo hurtigere får man skrevet noget godt. Derfor handler 'god kodestil' netop om at fjerne mulige faldbruber og huller, som man falder i, hvis man ikke gør sig alle mulige og umulige overvejelser ... for den slags overser man gang på gang!
God kodestil er somregel noget, man begynder at anlægge, når man har kodet et godt stykke tid og blevet dødtræt af at bruge oceaner af dyr spildtid på dumheder ;o)

Det kan godt være en skidt kode fungerer fint i ét dokument og i én situation. Du risikerer dog, den fungerer ad H...... til i en let ændret situation i overmorgen. Den slags skuffelser og irritationer mindsker man markant med 'god kodestil' =)

Synes godt om

stig69 Nybegynder

03. september 2008 - 10:49 #10

Jeg prøvede at udvide funktionen så tildeling af klasser kun skete på rækker, hvor tabellen havde et bestemt klassenavn, men det fejler for mig. Kan I gennemskue hvorfor?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style>
.odd, .red {
background: red;
}
.even, .blue {
background: blue;
}
th { background:cyan;}
</style>
<script>
window.onload = oddevenrows;

function oddevenrows() {
var tableElements = document.getElementsByTagName('table');
if (tableElements.className == 'widthBackground') {
var tableCount = table.length;
for (var i=0;i<tableCount;i++) {
var tr = table[i].getElementsByTagName('tr');
var trCount = tr.length;
for (var t=0;t<trCount;t++) {
tr[t].className = (t%2) ? 'even' : 'odd';
}
}
}
}
</script>
</head>

<body>
<table class="widthBackground">
<tbody>
<tr><th>Direktionen</th></tr>
<tr><td>text</td></tr>
<tr><td>text</td></tr>
<tr><td>text</td></tr>
</tbody>
</table><br /><br /><br />
<table>
<tbody>
<tr><th>Direktionen</th></tr>
<tr><td>text</td></tr>
<tr><td>text</td></tr>
<tr><td>text</td></tr>
</tbody>
</table>
</body>

</html>

Synes godt om

stig69 Nybegynder

03. september 2008 - 11:29 #11

satans også. Havde lavet en rigtig sjusker - beklager

var table = document.getElementsByTagName('table');
if (table.className = 'widthBackground') {

Synes godt om

stig69 Nybegynder

03. september 2008 - 11:31 #12

Og det virkede så hellere ikke. Kan ikke genkende klassen

Synes godt om

Slettet bruger

03. september 2008 - 13:28 #13

table er et array indeholdende tables - du skal derfor checke className på hvert element i arrayet.
Equals operatoren i javascript er ==, som du rigtigt nok bruger i 10:49:25, men ikke i 11:29:58.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style>
.odd, .red {
background: red;
}
.even, .blue {
background: blue;
}
th { background:cyan;}
</style>
<script>
window.onload = oddevenrows;

function oddevenrows() {
var table = document.getElementsByTagName('table');
var tableCount = table.length;
for (var i=0;i<tableCount;i++) {
if (table[i].className == 'widthBackground') {
var tr = table[i].getElementsByTagName('tr');
var trCount = tr.length;
for (var t=0;t<trCount;t++) {
tr[t].className = (t%2) ? 'even' : 'odd';
}
}
}
}
</script>
</head>

<body>
<table class="widthBackground">
<tbody>
<tr><th>Direktionen</th></tr>
<tr><td>text</td></tr>
<tr><td>text</td></tr>
<tr><td>text</td></tr>
</tbody>
</table><br /><br /><br />
<table>
<tbody>
<tr><th>Direktionen</th></tr>
<tr><td>text</td></tr>
<tr><td>text</td></tr>
<tr><td>text</td></tr>
</tbody>
</table>
</body>

</html>

Synes godt om

stig69 Nybegynder

03. september 2008 - 13:43 #14

hvis du er hurtig kan du score 60 point: http://www.eksperten.dk/spm/844047

Synes godt om

stig69 Nybegynder

03. september 2008 - 14:09 #15

kvadratrodenaf1--> Du må meget gerne svare på det andet spørgsmål

Og tusinde tak for hjælpen.

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript	4	24/06/202422:50	26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript	6	04/06/202416:23	05/06/202414:23
Ajax - indlæs webside og derefter hente data Af nemlig i JavaScript	4	21/05/202417:19	22/06/202422:07
Disable button efter 1. klik Af nemlig i JavaScript	2	05/05/202415:37	05/05/202416:25

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS