[JavaScript] jede zweite Tabellenzeile aus bzw. einblenden

[JörgD]

Hallo folgendes Problem verfolgt mich schon seit Wochen:
Ich möchte jede zweite Tabellenzeile gleichzeitig aus bzw. einblenden.

Ich habe eine Tabelle, in der Datensätze einer DB angezeigt werden.
Also für jeden

<tr> 

= 1 Datensatz.
Für diese Datensätze gibt es aber auch zusätzlich einen Infotext, der etwas mächtiger ausfällt und damit auch nicht direkt angezeigt werden soll. Nur bei Bedarf soll eine weitere Zeile unter jedem Datensatz erscheinen zb. bei <a onClick=ShowInfo()>Zeige Info</a>, jetzt kommt dat Problem:

So sieht es bis jetzt aus:

Name | Strasse | Plz | Ort | Counts
--------------------------------------
khk | jhkhjk | 5454 | khk | 5465464
khjk | jdasas | 5254 | kda | 32123
www | dasdad | 5655 | dsa | 2334
usw.

So soll es aussehen:

Name | Strasse | Plz | Ort | Counts
--------------------------------------
khk | jhkhjk | 5454 | khk | 5465464
INfotext zu dem 1. Datensatz

khjk | jdasas | 5254 | kda | 32123
INfotext zu dem 2. Datensatz

www | dasdad | 5655 | dsa | 2334
INfotext zu dem 2. Datensatz
usw.


Beim Erstellen der Seite (PHP) fülle ich für jeden Datensatz zwei Zeilen.
1. für den Datensatz selber
2. für den versteckten Info text

Ich habe es zwar mit

<div id='bemerkung'>
<table>
<tr>
<td>Der Datensatz</td>
</tr>
<tr>
<td>
<div align='left' style='display:none'>infotext</div>
</td>
</tr>
</table>
</div> 

Und der Funktion

function ShowInfo()
{
    var ebenen = document.getElementById('bemerkung').getElementsByTagName('div');
    for (i = 0; i < ebenen.length; i++) 
            if (ebenen [i].style.display=="none")
                ebenen [i].style.display = 'inline';
            else
                ebenen [i].style.display = 'none';
} 

geschafft alle versteckten Zeilen ein und auszublenden. Nur bleibt hier verständlicherweise, zwischen jedem sichtbaren Datensatz eine kleine Lücke, weil nur die Ebenen in der Tabellenzeilen versteckt werden und nicht die Zeile selber. Unschön

Ich habe schon versucht es direkt mit <tr style='display:none'> zu machen, nur habe ich mir da schon die Finger gebrochen, wegen Firefox, IE Kompatibilität. Der eine kann mit name nicht richtig usw. Ich bekomme einfach keine JS-funktion hin, die mir alle versteckten Zeilen einer bestimmten Tabelle, gleichzeitig ein bzw. ausblendet. Der oben geschriebene Workarround, einfach alle Ebenen innerhalb einer bestimmten Ebene zu verstecken, ist nicht gerade toll.

Hoffentlich kennt einer das Problem und kann mir auf die Sprünge helfen.

Wäre für mich wie Weihnachten, wenn es endlich mal klappt (in IE und FireFox)!

Jörg

[wahsaga]

Re: [JavaScript] jede zweite Tabellenzeile aus bzw. einblenden

Original geschrieben von JörgD

            if (ebenen [i].style.display=="none")
                ebenen [i].style.display = 'inline';
            else
                ebenen [i].style.display = 'none';
} 

bezogen auf divs eher unsinnig - ein div hat normalerweise display:block und nicht inline.

Ich habe schon versucht es direkt mit <tr style='display:none'> zu machen, nur habe ich mir da schon die Finger gebrochen, wegen Firefox, IE Kompatibilität. Der eine kann mit name nicht richtig usw.

tolle problembeschreibung - "ich hab da irgendwas versucht, aber irgendwie ging das alles nicht ..."

Ich bekomme einfach keine JS-funktion hin, die mir alle versteckten Zeilen einer bestimmten Tabelle, gleichzeitig ein bzw. ausblendet.

alle TR mit getElementsByTagName anzusprechen, und über diese collection einmal in einer schleife drüber zu laufen, sollte kein problem sein.

das problem hast du an dieser stelle erst mit dem wieder-einblenden: display für TR ist normalerweise table-row, aber das kapiert der IE wieder nicht. und wenn du ihm zu liebe stattdessen inline oder block nimmst, weiß ich nicht, wie der FF darauf reagieren wird ...
also im zweifelsfalle mit browserweiche.

[JörgD]

Hi wahsaga,
danke für den Tip, habe das mal umgestellt klappt gut in IE, aber im
FF oder Netscape wird es zwar ausgeblendet aber bei jedem Einblenden eerscheinen die Zeilen viel tiefer als sie sollten.

<html>
<head>
<title>Test Tabellenzeilen ausblenden</title>
<script language="javascript">
function ShowInfo()
{
    var tablerow = document.getElementById('bemerkung').getElementsByTagName('tr');
    for (i = 0; i < tablerow.length; i++) 
        if (tablerow[i].title == "hide"){
            if (tablerow[i].style.display=="none")
                tablerow[i].style.display = 'inline';
            else
                tablerow[i].style.display = 'none';
       }
}
</script>
</head>

<body>
<a onClick="ShowInfo()">ShowInfo</a>
<br>
<table name="bemerkung" id="bemerkung">
<tr><td>Immer</td></tr>
<tr title="hide"><td>Ein/Aus</td></tr>
<tr><td>Immer2</td></tr>
<tr title="hide"><td>Ein/Aus2</td></tr>
</table>
</body>
</html> 

Eine Idee wie man das verhindert?

Jörg

[wahsaga]

Original geschrieben von JörgD
Eine Idee wie man das verhindert?

ja - lesen!


[color=#dddddd] i f'king told ya about inline vs. table-row, didn't i?[/color]

[JörgD]

Original geschrieben von wahsaga


[color=#FF0000] i f'king told ya about inline vs. table-row, didn't i?[/color]

Wußte beim besten Willen nicht, was du mit table-row gemeint hast.
Aber bei deiner netten Art lernt man schnell.

So läuft´s perfekt. Danke!

function ShowInfo()
{
    var tablerow = document.getElementById('bemerkung').getElementsByTagName('tr');
    for (i = 0; i < tablerow.length; i++) 
        if (tablerow[i].title == 'hide'){
            if (isIE){
                if (tablerow[i].style.display=="none")
                    tablerow[i].style.display = 'inline';
                else
                    tablerow[i].style.display = 'none';
                    
            }
            if (isW3C){
                if (tablerow[i].style.display=="none")
                    tablerow[i].style.display = 'table-row';
                else
                    tablerow[i].style.display = 'none';
            }
        }
} 

[color=#dddddd]
And you my friend, are an arrogant braggart. Stop posting such moronic aspersions.
[/color]