insertBefore

[vit_o]

Guten Abend,
ich würde gern in einer Tabelle mit der id="liste", vor der ersten Zeile mit der id="zeile1" eine weitere Zeile einfügen. In der Variablen zeile ist die neu erzeugte Zeile gespeichert. Hiermit funktioniert es aber nicht:

document.getElementById("Liste").insertBefore(zeile, document.getElementById("zeile1"));

Vielen Dank für eure Hilfe!

 

[crash]

Ich denke du willst insertRow().

 

[vit_o]

das würde gehen, aber ich würde die Tabellenzeile gerne vor der ersten zeile einfügen.

 

[crash]

Dann insertRow() mit index 0.

 

[vit_o]

hmm, ich hab festgestellt, dass mir das trotzdem nicht weiter hilft. mit insertRow erzeuge ich eine Zeile. ich will aber eine bereits erzeugte Zeile einhängen. Das Problem ist, dass diese Zeile kopiert wurde mit cloneNode und nicht neu erzeugt werden soll.

 

[crash]

tableRef.insertBefore(neuesTr, tableRef.row[0]);

(Bitte tBodies beachten)

 

[vit_o]

hm also bei mir funktioniert das nicht so ganz. hab ich da jetzt was falsch verstanden?
Die Tabelle hat die id="Tabelle" und die erste Zeile die id="tr1"

document.getElementById("Tabelle").insertBefore(neuezeile, document.getElementById("tr1"));

 

[crash]

var tableRef = document.getElementById("Tabelle");
tableRef.insertBefore(neuesTr, tableRef.rows[0]);

Hab's mal korrigiert und komplettiert. Guck auch in die Fehlerkonsole!

 

[vit_o]

mit

row[0]

funktioniert das einfach nicht! mit

row[1]

ja, aber dann wird nicht vor der ersten Zeile eingefügt.
wenn ich mit alert row[0] ausgebe, dann sagt er mir aber, dass das eine Zeile ist und auch zellen besitzt...

 

[crash]

Und welcher Fehler kommt im Zusammenhang mit insertBefore und rows[0]? "rows" btw und nicht "row"

 

[vit_o]

rows[0] meinte ich auch... also fehlermeldungen seh ich gar keine. zum debuggen benutz ich firebug.

 

[crash]

Und wie sieht's in anderen Browsern aus? Evtl. hast du ja einen Bug gefunden.

 

[vit_o]

Es funktioniert in keinem Browser. ich hab keine Ahnung was ich falsch mache. Hier mal der vollständige js-code

function loesche_value(element)
{
    for(var i = 0; i < element.getElementsByTagName("input").length; i++)
    {
        element.getElementsByTagName("input")[i].value="";
    }
    return element;
}

function neue_zeile()
{
    if(document.getElementById("Tabelle").rows[0].getElementsByTagName("td")[0].getElementsByTagName("input")[1].value!=="" &&
    document.getElementById("Tabelle").rows[0].getElementsByTagName("td")[1].getElementsByTagName("input")[0].value!=="")
       //es soll nur eine neue Zeile erstellt werden, wenn in der ersten Tabellenzeile gewisse Zellen ausgefüllt sind
    {
        var zeile    =    document.getElementById("Tabelle").rows[0].cloneNode(true);
        //In jeder 2 zeile wechselt die hintergrundfarbe
        if(document.getElementById("Tabelle").rows[0].style.backgroundColor=="rgb(255, 255, 255)" || document.getElementById("Tabelle").rows[0].style.backgroundColor=="")
        {
            zeile.style.backgroundColor="rgb(210, 210, 255)";
        }
        else
        {
            zeile.style.backgroundColor="rgb(255, 255, 255)";
        }
        zeile            =    loesche_value(zeile);
        document.getElementById("Tabelle").insertBefore(zeile, document.getElementById("Tabelle").rows[0]);
    }
}

 

[crash]

Du solltest dir mal angewöhnen die Ergebnisse aus den DOM-Methoden zwischenzuspeichern.

var tabelle = document.getElementById("Tabelle");

und dann mit der Referenz weiter arbeiten.

Ansonsten sehe ich keinen Fehler. Steht denn etwas in der Fehlerkonsole? Teste doch noch die Reihen mit getElementsByTagName() zu holen.

 

[vit_o]

danke für den tipp, aber mit getElementsByTagName('table') für die Tabelle und für die Zeilen mit getElementsByTagName('tr')[0] funktioniert es leider auch nicht.
Und wie gesagt, firebug findet auch keine Fehler; trozdem funktioniert es weder im IE, in Firefox, in Safari, in Opera o. im Netscape Navigator.

 

[crash]

Dann poste einen Link zu kompletten Seite.

 

[AGI]

eigentlich Funktionierts

Hallo,

dein Code funktioniert soweit ganz gut.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> 
<html> 
<head> 
<title>Test</title>
<script type="text/javascript">
function loesche_value(element)
{
    for(var i = 0; i < element.getElementsByTagName("input").length; i++)
    {
        element.getElementsByTagName("input")[i].value="";
    }
    return element;
}

function neue_zeile()
{
    if(true )
       //es soll nur eine neue Zeile erstellt werden, wenn in der ersten Tabellenzeile gewisse Zellen ausgefüllt sind
    {
        var zeile    =    document.getElementById("Tabelle").rows[0].cloneNode(true);
        //In jeder 2 zeile wechselt die hintergrundfarbe
        if(document.getElementById("Tabelle").rows[0].style.backgroundColor=="rgb(255, 255, 255)" || document.getElementById("Tabelle").rows[0].style.backgroundColor=="")
        {
            zeile.style.backgroundColor="rgb(210, 210, 255)";
        }
        else
        {
            zeile.style.backgroundColor="rgb(255, 255, 255)";
        }
        zeile            =    loesche_value(zeile);
        document.getElementById("Tabelle").insertBefore(zeile, document.getElementById("Tabelle").rows[0]);
    }
}
</script>

</head> 
<body>
  <table border="1">
    <tbody id="Tabelle">
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>2</td><td>3</td><td>4</td></tr>
    <tr><td>3</td><td>4</td><td>5</td></tr>
    <tr><td>4</td><td>5</td><td>6</td></tr>
  </tbody>
  </table>
  <p onclick="neue_zeile()">Zeile</p>
</body> 
</html>

Folgende Änderungen hab ich vorgenommen:
die IF-Anweisung auf TRUE gesetzt, da ich deine Tabelle nicht ganz nachbauen wollte.

Was aber wichtiger ist:
die ID liegt im tbody-Tag

Viele Grüße

 

[crash]

Sofern das nicht der Fall ist:

var firstRow = tabelle.tBodies[0].rows[0];

Das könnte das Problem klären.