nicht angemeldet
Anzahl Childs unverständlich!!
MudGuardIch habe folgenden Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<script type="text/javascript">
function anzahl_zeilen()
{
var zeilen_gesamt = document.getElementById('szenen').childNodes.length;
document.getElementById("anz").value = zeilen_gesamt;
}
</script>
</head>
<body>
<table id="test_table" summary="Test">
<thead>
<tr>
<th>Var1</th>
<th>Var2</th>
<th>Var3</th>
</tr>
</thead>
<tfoot>
</tfoot>
<tbody id="szenen"><tr>
<td>
<select name='b1'>
<option value="ja">ja</option>
<option value="nein">nein</option>
</select>
</td>
<td>
<input name='b1' type="text" value="" size="20" maxlength="50" />
</td>
<td>
<input name='b2' type="text" value="" size="20" maxlength="50" />
</td>
</tr>
<tr>
<td>
<select name='c1'>
<option value="ja">ja</option>
<option value="nein">nein</option>
</select>
</td>
<td>
<input name='c1' type="text" value="" size="20" maxlength="50" />
</td>
<td>
<input name='c2' type="text" value="" size="20" maxlength="50" />
</td>
</tr>
</tbody>
</table>
<input name="button" type="button" value="Anzahl Zeilen" onclick="anzahl_zeilen()" />
<input id="anz" name="anz" type="text" value="" />
</body>
</html>
Warum bekomme ich bei childNodes.length eine 4 zurück. Ich sehe in dem Code nur zwei Kinder. Kann mir das jmd erklären? Benutze Firefox als Browser. Hat das damit was zu tun??
Vielen Dank im voraus!
-
Hi,
Warum bekomme ich bei childNodes.length eine 4 zurück. Ich sehe in dem Code nur zwei Kinder.
Du solltest die Augen öffnen - dann siehst Du auch die 2 Text-Knoten, die Zeilenumbruch und Einrückung jeweils nach dem </tr> und vor dem nächsten <tr> bzw. dem </tbody> enthalten.
Kann mir das jmd erklären? Benutze Firefox als Browser. Hat das damit was zu tun??
Nur insofern als daß IE zu blöd ist, diese Textknoten zu erkennen - der liefert fälschlicherweise nur 2 Childnodes.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
-
Hi!
Warum bekomme ich bei childNodes.length eine 4 zurück. Ich sehe in dem Code nur zwei Kinder.
Du solltest die Augen öffnen - dann siehst Du auch die 2 Text-Knoten, die Zeilenumbruch und Einrückung jeweils nach dem </tr> und vor dem nächsten <tr> bzw. dem </tbody> enthalten.Ergänzend: Diese Lösung bekommt man auch, indem man weiterforscht und über die childNodes iteriert. Sie haben eine Eigenschaft nodeType, mit der man erkennen kann, dass zwei davon die Text-Nodes sind.
Ein gutes Werkzeug, um sich die Elemente in ihrem aktuellen Zustand anzusehen ist für den Firefox die Extension Firebug. (Rechtsklick auf das Element -> Element untersuchen -> auf der rechten Seite DOM wählen -> durch die Eigenschaften navigieren) Andere aktuelle Browser haben ebenfalls solche Werkzeuge, und sogar direkt eingebaut.
Lo!
-
Du solltest die Augen öffnen - dann siehst Du auch die 2 Text-Knoten, die Zeilenumbruch und Einrückung jeweils nach dem </tr> und vor dem nächsten <tr> bzw. dem </tbody> enthalten.
Ergänzend: Diese Lösung bekommt man auch, indem man weiterforscht und über die childNodes iteriert. Sie haben eine Eigenschaft nodeType, mit der man erkennen kann, dass zwei davon die Text-Nodes sind.
Das waren super Tipps! Hab den Code modifiziert und habe eine Lösung gefunden, die wohl in beiden Browsern funktionieren müsste...
Vielen Dank!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Test</title> <script type="text/javascript"> function anzahl_zeilen() { var zeilen_gesamt = document.getElementById('szenen').childNodes.length; document.getElementById("anz").value = zeilen_gesamt; var zeilen_tats = 0; for (i=0;i<zeilen_gesamt;i++) { if (document.getElementById("szenen").childNodes[i].nodeType == 3) { zeilen_tats = zeilen_tats+1; } } document.getElementById('anz_tats').value = zeilen_tats; } </script> </head> <body> <table id="test_table" summary="Test"> <thead> <tr> <th>Var1</th> <th>Var2</th> <th>Var3</th> </tr> </thead> <tfoot> </tfoot> <tbody id="szenen"><tr> <td> <select name='b1'> <option value="ja">ja</option> <option value="nein">nein</option> </select> </td> <td> <input name='b1' type="text" value="" size="20" maxlength="50" /> </td> <td> <input name='b2' type="text" value="" size="20" maxlength="50" /> </td> </tr> <tr> <td> <select name='c1'> <option value="ja">ja</option> <option value="nein">nein</option> </select> </td> <td> <input name='c1' type="text" value="" size="20" maxlength="50" /> </td> <td> <input name='c2' type="text" value="" size="20" maxlength="50" /> </td> </tr> </tbody> </table> <input name="button" type="button" value="Anzahl Zeilen" onclick="anzahl_zeilen()" /> <label for="anz">Anzahl Kinder:</label> <input id="anz" name="anz" type="text" value="" /> <label for="anz_tats">Anzahl Reihen:</label> <input id="anz_tats" name="anz_tats" type="text" value="" /> </body> </html>-
function anzahl_zeilen()
{
var zeilen_gesamt = document.getElementById('szenen').childNodes.length;
document.getElementById("anz").value = zeilen_gesamt;
var zeilen_tats = 0;
for (i=0;i<zeilen_gesamt;i++)
{
if (document.getElementById("szenen").childNodes[i].nodeType == 3)
{
zeilen_tats = zeilen_tats+1;
}
}
document.getElementById('anz_tats').value = zeilen_tats;
}Manche Browser kennen childElementCount aus Element Traversal. Mit einer Feature-Abfrage kann man die Sache in einem Eigenschaftszugriff lösen. Für die restlichen Browser wird weiterhin über childNodes iteriert
function childElementCount (element) { // Unterstützt der Browser schon childElementCount? if ('childElementCount' in element) { return element.childElementCount; } var childNodes = element.childNodes, l = childNodes.length, childElementCount = 0, i; for (i = 0; i < l; i++) { if (childNodes[i].nodeType == 1) { childElementCount++; } } return childElementCount; } var szenen = document.getElementById('szenen'); var zeilen = childElementCount(szenen);Noch einfacher geht es allerdings über die http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#tbody@title=rows-Eigenschaft des tbody-Elements:
var szenen = document.getElementById('szenen'); var zeilen = szenen.rows.length ~~~; Das spart einem die ganze Arbeit. Mathias
-
-
-