Versteckte Tabellenzeilen sichtbar machen

wiked · 17. Oktober 2008, 10:14

Hallo an alle...

also ich habe eine Tabelle mit 20 Zeilen, wobei beim laden der Seite nur die erste Zeile sichtbar ist. Jede Zeile hat eine eindeutige id (1-20). Nun möchte ich per Button jeweils eine weitere Zeile angezeigt bekommen. Also beim ersten mal klicken die 2. Zeile, nochmal klicken die 3. usw... mein bisheriger ansatz ist:

Quellcode

function showHiddenRows(){
var a = 2;
while (a <=20){
document.getElementById(a).style.display = '';
a++;
break;
}
}

Dadurch wird nur die 2. Zeile eingeblendet und danach passiert nichts mehr. Mir ist auch halbwegs klar, warum... Aber ich finde keine Lösung wie ich das lösen könnte

BennyBunny · 17. Oktober 2008, 12:31

Naja der Code, den du da hast macht ja so wenig Sinn. Um das mal zu übersetzen steht da:

Setze a auf 2.
Mache folgendes so lange bis a kleiner gleich 20 ist:
Setze Display-Eigenschaft von Tabelle a;
Dann erhöhe a um eins.
Verlasse die Schleife dann.

Da müsste man sich zum einen Fragen, warum machst du eine Schleife, wenn du sowieso nach dem ersten Durchlauf gleich rausspringst. Und warum setzt du die variable immer neu. Dass er dann nicht mehr als Tabelle 2 anzeigt sollte ja klar sein.
Wenn du nun aber die variable ausserhalb setzt, lebt sie ja sowieso weiter nachdem die Funktion aufgerufen wird, was bei deinem Code Snippet nicht der Fall ist. Da wird a erzeugt und ist nur so lange gültig, bist die Funktion durchlaufen ist.

Mein Vorschlag:

Quellcode

var lastId = 2;
function bla () {
if ( lastId <= 20 ) {
document.getElementById(lastId).style.display = '';
lastId++;
}
}

wiked · 17. Oktober 2008, 12:39

Danke für deine Hilfe, leuchtet natürlich ein :thumbsup:

naja bescheftige mich erst seit ein paar Tagen mit javascript, musst da etwas rücksicht nehmen. Aber es scheint ja eher ein Logikfehler meinerseits gewesen zu sein

BennyBunny · 17. Oktober 2008, 12:40

Deswegen hab ich es ja etwas ausführlicher geschrieben

wiked · 17. Oktober 2008, 13:16

So nun grübel ich schon am nächsten Problem und zwar habe ich in jeder Zeile der Tabelle eine Checkbox. Wenn ich jetzt Checkboxen auswähle sollen diese Zeile invisible werden.

Dachte mir eigentlich, dass das ganz simple ist:

Quellcode

function hideRow() {
if (document.getElementsByName("hide")[0].checked){
document.getElementByTagName("tr").style.display = 'none';
}
}

Quellcode

<td><input type="button" value="Zeilen löschen" onClick="hideRow()"></td>

... stell mich gerade irgendwie dumm an

EDIT:

Firebug meldet:
document.getElementByTagName is not a function

Torben Brodt · 17. Oktober 2008, 20:54

element oder elements?

Lemmi · 18. Oktober 2008, 00:37

Klugscheiß: Elements! Elements! Elements!

Lemmi - sei still!

Okay ...

wiked · 20. Oktober 2008, 09:09

Guten Morgen an alle!
Okay hab es jetzt so:

Quellcode

function hideRow() {
if (document.getElementsByName("hide")[0].checked=true){
document.getElementsByTagName('tr').style.display = 'none';
}
}

Funktioniert aber trotzdem nicht... Firebug meldet: "document.getElementsByTagName('tr').style has no properties". Wenn ich jetzt auf den löschen Button klicke kommt die Meldung von Firebug und zusätzlich werden auch alle Checkboxen ausgewählt!

Torben Brodt · 22. Oktober 2008, 20:11

selber fehler... du erhältst du liste von Elementen. Es heißt ja auch getElementsByTagName.
Mache eine Schleife drumherum und es funktioniert:

Quellcode

var x = document.getElementsByTagName('tr')
for(var i=0; i<x.length; i++){
x[i].style.display = 'none';
}

wiked · 23. Oktober 2008, 09:16

Okay leuchtet ein... nur "löscht" er jetzt ja jede Zeile und nicht die, die per Checkbox ausgewählt wurden! Da ja nicht abgefragt wird welche Chechboxen ausgewählt wurde!

Torben Brodt · 24. Oktober 2008, 18:48

und du hast ein xml element hide eingefügt? da wird der w3 validator aber meckern.
nicht destotrotz

Quellcode

if(document.getElementsByName("hide")[i].checked==true) ...

wiked · 27. Oktober 2008, 09:08

Mhh ja... Firebug meldet jetzt "document.getElementsByName("hide") has no properties"

Torben Brodt · 30. Oktober 2008, 18:26

Ja, ich glaube das könnte am geschilderten Grund liegen.

Lemmi · 30. Oktober 2008, 19:22

wiked schrieb:

Da ja nicht abgefragt wird welche Chechboxen ausgewählt wurde!

Ganz ehrlich: Ich versteh dich nicht. Du scheint vom Ablauf genug zu verstehen, um zu sehen was fehlt. Warum versuchst du nicht erstmal selber das Problem zu lösen? Bis ich hier im Forum etwas frage, versuche ich mich erst einmal selbst bis ins Grab daran. Alleine die Fehlermeldung würde ich mich dazu anregen, herauszufinden, was sie eigentlich aussagt. "no properties" heißt in deinem Fall zum Beipsiel, dass ein gewisses Element in deiner Webseite nicht existiert ...

wiked · 31. Oktober 2008, 09:15

Hab schon einiges an Zeit in das Problem investiert, aber ich komme nicht dahinter

mein letzter Ansatz...

Quellcode

function hideRow() {
var x = document.getElementsByTagName('tr')
for(var i=0; i<x.length; i++){
if(document.getElementsByName('hide')[0].checked==true){
x[i].style.display = 'none';
}
}
}

Aber kann das Problem darin legen, dass jede Checkbox name="hide" hat, da diese durch ne for schleife in php erzeugt wird?!

student2312 · 2. November 2008, 12:47

wiked schrieb:

Mhh ja... Firebug meldet jetzt "document.getElementsByName("hide") has no properties"

Das kam bei mir immer, wenn das gefragte Element noch nicht existierte. Evtl. das Javascript hinter hide1, hide2 .... stellen?

wiked · 5. November 2008, 15:53

Mein aktueller Ansatz zum löschen der Zeilen wo die Checkbox ausgewählt wurde:

Quellcode

for ($a=2; $a<=20; $a++){
echo '<tr valign="top" id="'.$a.'" style="display: none;">';
echo '<td>';
$handle = fopen ("Testplan.csv","r");
fgets($handle); // Erste Zeile überlesen
$data = fgetcsv($handle, 30000, ';');
echo '<select name="pname'.$a.'">';
echo '<option selected></option>';
foreach ($data as $var){
echo "<option value='$var'>$var</option>";
}
fclose ($handle);
echo '</select>';
echo '<td><input type="text" name="pwert'.$a.'"></input></td>';
echo '<td><input type="checkbox" name="hide['.$a.']"></input></td>';
echo '</tr>';
}

Alles anzeigen

Quellcode

function hideRow() {
var x = document.getElementsByTagName('tr');
for (var a=2; a<x.length;a++){
for (var i=0; i<x.length; i++){
if(document.getElementsByName('hide['+a+']')[0].checked==true){
x[i].style.display = 'none';
}
}
}
}

Aber irgendwie macht er da genau gar nichts. Und es kommt auch keine Fehlermeldung!

Torben Brodt · 6. November 2008, 18:58

Poste mal einen HTML Code zum experimentieren.

Es könnte sein, dass es Probleme gibt Arrays direkt über den Namen zu adressieren. Zumindest hatte ich das Problem früher mal. Stattdessen kannst du über form.elements iterieren.
Schau dir dieses Script mal an: [coderwiki]http://www.coder-wiki.de/HowTos/JavaScript-Alle-Formularelemente-verarbeiten[/coderwiki]

Versteckte Tabellenzeilen sichtbar machen

Versteckte Tabellenzeilen sichtbar machen

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

wiked schrieb:

Quellcode

wiked schrieb:

Quellcode

Quellcode

Teilen

Tags