createElement, appendChild und mit removehild wieder weg

[Dominik]

Ich habe eine ganz normale Tabelle:

<table>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>

dann füge ich mit createElement und appendChild neue Zeilen ein. Die neuen Zeilen haben diesen Aufbau:

<tr><a href="bla"><td>großesbla</td></a></tr>

Bis dahin klappt alles.

jetzt versuche ich diese tabellenzeilen wieder zu löschen. hat da jemand erfahrung oder eine ahnung wie ich da am besten mache?

[finnsen]

Ich habe eine ganz normale Tabelle:

<table>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>

dann füge ich mit createElement und appendChild neue Zeilen ein. Die neuen Zeilen haben diesen Aufbau:

<tr><a href="bla"><td>großesbla</td></a></tr>

Bis dahin klappt alles.

jetzt versuche ich diese tabellenzeilen wieder zu löschen. hat da jemand erfahrung oder eine ahnung wie ich da am besten mache?

Heyho,

erstmal sollte die tabelle so aussehen:

<table>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
</table>

Dann sollte das, was du mit appendChild einfügst so aussehen:

<tr><td><a href="bla">großesbla</a></td></tr>

Und mit dem Befehl

removeChild(document.getElementById("id").firstChild);

Entfernst du das ganze wieder.

Gruß,
finnsen

[Dominik]

Ich habe eine ganz normale Tabelle:

<table>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>

dann füge ich mit createElement und appendChild neue Zeilen ein. Die neuen Zeilen haben diesen Aufbau:

<tr><a href="bla"><td>großesbla</td></a></tr>

Bis dahin klappt alles.

jetzt versuche ich diese tabellenzeilen wieder zu löschen. hat da jemand erfahrung oder eine ahnung wie ich da am besten mache?

Heyho,

erstmal sollte die tabelle so aussehen:

<table>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
</table>

Dann sollte das, was du mit appendChild einfügst so aussehen:

<tr><td><a href="bla">großesbla</a></td></tr>

Und mit dem Befehl

removeChild(document.getElementById("id").firstChild);

Entfernst du das ganze wieder.

Gruß,
finnsen

welchem element soll ich die id geben?

[finnsen]

Ich habe eine ganz normale Tabelle:

<table>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>

dann füge ich mit createElement und appendChild neue Zeilen ein. Die neuen Zeilen haben diesen Aufbau:

<tr><a href="bla"><td>großesbla</td></a></tr>

Bis dahin klappt alles.

jetzt versuche ich diese tabellenzeilen wieder zu löschen. hat da jemand erfahrung oder eine ahnung wie ich da am besten mache?

Heyho,

erstmal sollte die tabelle so aussehen:

<table>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
</table>

Dann sollte das, was du mit appendChild einfügst so aussehen:

<tr><td><a href="bla">großesbla</a></td></tr>

Und mit dem Befehl

removeChild(document.getElementById("id").firstChild);

Entfernst du das ganze wieder.

Gruß,
finnsen

welchem element soll ich die id geben?

Heyho,

ich bin kein JavaScript Profi, aber ich habe so eine Lösung schon mal hier im Forum aufgeschnappt... Du solltest die Befehle aber allesamt noch einmal nachschlagen, damit es funzt...

Du solltest dbeim Erstellen den Zeilen IDs zuordnen (am besten selbsthochzählend, also id="zeile1", id="zeile2"). Dann per FOR schleife einfernen:

for(i=1;i<getElementsByTagName("tr").length;i++)
  removeChild(document.getElementById("zeile"+id).firstChild);

Das System sollte funzen...

Gruß,
finnsen

[Dominik]

Ich habe eine ganz normale Tabelle:

<table>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>

dann füge ich mit createElement und appendChild neue Zeilen ein. Die neuen Zeilen haben diesen Aufbau:

<tr><a href="bla"><td>großesbla</td></a></tr>

Bis dahin klappt alles.

jetzt versuche ich diese tabellenzeilen wieder zu löschen. hat da jemand erfahrung oder eine ahnung wie ich da am besten mache?

Heyho,

erstmal sollte die tabelle so aussehen:

<table>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
</table>

Dann sollte das, was du mit appendChild einfügst so aussehen:

<tr><td><a href="bla">großesbla</a></td></tr>

Und mit dem Befehl

removeChild(document.getElementById("id").firstChild);

Entfernst du das ganze wieder.

Gruß,
finnsen

welchem element soll ich die id geben?

Heyho,

ich bin kein JavaScript Profi, aber ich habe so eine Lösung schon mal hier im Forum aufgeschnappt... Du solltest die Befehle aber allesamt noch einmal nachschlagen, damit es funzt...

Du solltest dbeim Erstellen den Zeilen IDs zuordnen (am besten selbsthochzählend, also id="zeile1", id="zeile2"). Dann per FOR schleife einfernen:

for(i=1;i<getElementsByTagName("tr").length;i++)
  removeChild(document.getElementById("zeile"+id).firstChild);

Das System sollte funzen...

Gruß,
finnsen

das hört sich gut an, aer welches element soll removeChild aufrufen? so alleine bringt das nur fehler.

[Thomas Meinike]

Hallo,

das hört sich gut an, aer welches element soll removeChild aufrufen? so alleine bringt das nur fehler.

Beachte, dass IE und Mozilla als erstes Kindelement unterhalb von table tbody anlegen, also:

var tab=document.getElementsByTagName("table")[0].getElementsByTagName("tbody")[0];
  if(tab.childNodes.length>0)
  {
   tab.removeChild(tab.lastChild); // oder .firstChild
  }

Damit wird jeweils die letzte Reihe (tr) entfernt.
Statt .getElementsByTagName("tbody")[0] koennte man auch .firstChild schreiben, aber da ist Mozilla eigen, denn jeder Zeilenumbruch im HTML-Code wird als neuer Kindknoten ausgewertet.

MfG, Thomas

[Dominik]

Hallo,

das hört sich gut an, aer welches element soll removeChild aufrufen? so alleine bringt das nur fehler.

Beachte, dass IE und Mozilla als erstes Kindelement unterhalb von table tbody anlegen, also:

var tab=document.getElementsByTagName("table")[0].getElementsByTagName("tbody")[0];
  if(tab.childNodes.length>0)
  {
   tab.removeChild(tab.lastChild); // oder .firstChild
  }

Damit wird jeweils die letzte Reihe (tr) entfernt.
Statt .getElementsByTagName("tbody")[0] koennte man auch .firstChild schreiben, aber da ist Mozilla eigen, denn jeder Zeilenumbruch im HTML-Code wird als neuer Kindknoten ausgewertet.

MfG, Thomas

Wir sind dem gnzen jetz ganz genau auf der spur. das mit tbody funktioniert. aber beim entscheidendenaufruf von removeChild übergebe ich noch ein falsches argument:

for(i = 0; i < document.getElementsByTagName("tr").length; i++){
        var tab=document.getElementsByTagName("table")[0].getElementsByTagName("tbody")[0];
            if(tab.getElementsByTagName("tr")[i].id == "unt"){
            alert("Zeile "+i);
            tab.removeChild(tab.getElementsByTagName("tr")[i]);
            }
        }

weiß jemand was ich an tab.getElementsByTagName("tr")[i] noch ändern muss damit er es akzeptiert? (ich vermute hinten muss noch was dran)

[Thomas Meinike]

Hallo,

Wir sind dem gnzen jetz ganz genau auf der spur. das mit tbody funktioniert. aber beim entscheidendenaufruf von removeChild übergebe ich noch ein falsches argument:

for(i = 0; i < document.getElementsByTagName("tr").length; i++){
        var tab=document.getElementsByTagName("table")[0].getElementsByTagName("tbody")[0];
            if(tab.getElementsByTagName("tr")[i].id == "unt"){
            alert("Zeile "+i);
            tab.removeChild(tab.getElementsByTagName("tr")[i]);
            }
        }

weiß jemand was ich an tab.getElementsByTagName("tr")[i] noch ändern muss damit er es akzeptiert? (ich vermute hinten muss noch was dran)

Probiere es so:

var tab=document.getElementsByTagName("table")[0].getElementsByTagName("tbody")[0];

for(i = 0; i < tab.childNodes.length; i++){
  if(tab.childNodes[i].id == "unt"){
    alert("Zeile "+i);
    tab.removeChild(tab.childNodes[i]);
  }
}

MfG, Thomas

[Dominik]

Hallo,

Wir sind dem gnzen jetz ganz genau auf der spur. das mit tbody funktioniert. aber beim entscheidendenaufruf von removeChild übergebe ich noch ein falsches argument:

for(i = 0; i < document.getElementsByTagName("tr").length; i++){
        var tab=document.getElementsByTagName("table")[0].getElementsByTagName("tbody")[0];
            if(tab.getElementsByTagName("tr")[i].id == "unt"){
            alert("Zeile "+i);
            tab.removeChild(tab.getElementsByTagName("tr")[i]);
            }
        }

weiß jemand was ich an tab.getElementsByTagName("tr")[i] noch ändern muss damit er es akzeptiert? (ich vermute hinten muss noch was dran)

Probiere es so:

var tab=document.getElementsByTagName("table")[0].getElementsByTagName("tbody")[0];

for(i = 0; i < tab.childNodes.length; i++){
  if(tab.childNodes[i].id == "unt"){
    alert("Zeile "+i);
    tab.removeChild(tab.childNodes[i]);
  }
}

MfG, Thomas

Das mit den childNodes scheint auch nicht zu gehen.Bei mir sieht es jetzt so aus:

var tab=document.getElementsByTagName("table")[0].getElementsByTagName("tbody")[0];
        for(i = 0; i < document.getElementsByTagName("tr").length; i++){
            if(tab.getElementsByTagName("tr")[i].id == "unt"){
            alert("Zeile "+i);
            tab.removeChild(tab.childNodes[i]);
            }
        }

Er führt bis zum Alet alles richtig aus, zeigt auch die richtige Zeile an, die gelöscht werden soll und nach der Nachrichtbox kommt dann der Fehler Typkonflikt.

[Thomas Meinike]

Hallo,

Er führt bis zum Alet alles richtig aus, zeigt auch die richtige Zeile an, die gelöscht werden soll und nach der Nachrichtbox kommt dann der Fehler Typkonflikt.

Bei mir funktioniert das in IE und Mozilla:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test by TM 08/02</title>
<script language="JavaScript" type="text/javascript">
<!--
function Test()
{
var tab=document.getElementsByTagName("table")[0].getElementsByTagName("tbody")[0];

for(i = 0; i < tab.childNodes.length; i++){
  if(tab.childNodes[i].id == "unt"){
    alert("Zeile "+i);
    tab.removeChild(tab.childNodes[i]);
  break;
 }
}
}
//-->
</script>
</head>
<body onclick="Test()">
<table summary="" border="1">
<tr><td>0</td></tr><tr><td>1</td></tr><tr id="unt"><td>2</td></tr><tr><td>3</td></tr>
</table>
<form action="">
<input type="button" value="Test" onclick="Test()">
</form>
</body>
</html>

MfG, Thomas

[Dominik]

Hallo,

Er führt bis zum Alet alles richtig aus, zeigt auch die richtige Zeile an, die gelöscht werden soll und nach der Nachrichtbox kommt dann der Fehler Typkonflikt.

Bei mir funktioniert das in IE und Mozilla:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test by TM 08/02</title>
<script language="JavaScript" type="text/javascript">
<!--
function Test()
{
var tab=document.getElementsByTagName("table")[0].getElementsByTagName("tbody")[0];

for(i = 0; i < tab.childNodes.length; i++){
  if(tab.childNodes[i].id == "unt"){
    alert("Zeile "+i);
    tab.removeChild(tab.childNodes[i]);
  break;
}
}
}
//-->
</script>
</head>
<body onclick="Test()">
<table summary="" border="1">
<tr><td>0</td></tr><tr><td>1</td></tr><tr id="unt"><td>2</td></tr><tr><td>3</td></tr>
</table>
<form action="">
<input type="button" value="Test" onclick="Test()">
</form>
</body>
</html>

MfG, Thomas

Vielleicht liegt es daran, dass bei mir innerhalb der <td></td> immer noch <a></a> liegen. Außerdem binde ich noch Textknoten ein. In meinem ursprünglichen Beitrag siehst du den Wuellcode.

[Thomas Meinike]

Hallo,

Vielleicht liegt es daran, dass bei mir innerhalb der <td></td> immer noch <a></a> liegen. Außerdem binde ich noch Textknoten ein. In meinem ursprünglichen Beitrag siehst du den Wuellcode.

Ist
<tr><a href="bla"><td>großesbla</td></a></tr>
eine gute Idee?

Also Elemente richtig verschachteln, dann klappt's auch mit dem DOM.

MfG, Thomas