webentwicklung-frage-antwort-db.com.de

Wie fügt man mit HTMLTableElement.insertRow eine Zeile am Ende der Tabelle ein?

Hintergrund und Setup

Ich versuche, eine Tabelle aus Tabellendaten in Javascript zu erstellen, aber wenn ich versuche, Zeilen in ein Tabellenelement einzufügen, wird dies in der entgegengesetzten Reihenfolge von dem eingefügt, was ich erwarte, und der umgekehrten Reihenfolge der Verwendung von appendChild. (Hier ist eine jsfiddle mit einer Live-Demo davon).

Angenommen, ich habe einige Daten wie diese:

var data = [
    {"a": 1, "b": 2, "c": 3},
    {"a": 4, "b": 5, "c": 6},
    {"a": 7, "b": 8, "c": 9}
], keys = ["a", "b", "c"];

Wenn ich versuche, die Methoden insertRow() und insertCell() zum Erstellen von Tabellen zu verwenden, durchlaufe ich die oben genannten Daten und Schlüssel. Ich bekomme die umgekehrte Reihenfolge von dem, was ich erwarte:

InsertRows pic

Wird mit folgendem Code generiert:

// insert a table into the DOM
var insertTable = insertDiv.appendChild(document.createElement("table")),
    thead = insertTable.createTHead(), // thead element
    thRow = thead.insertRow(), // trow element
    tbody = insertTable.createTBody(); // tbody element


thRow.insertCell().innerText = "#"; // add row header

// insert columns
for (var i = 0, l = keys.length; i < l; i ++) {
    var k = keys[i];
    thRow.insertCell().innerText = k;
}

// insert rows of data
for (var i = 0, l = data.length; i < l; i ++) {
    var rowData = data[i],
        row = tbody.insertRow();
    row.insertCell().innerText = i;
    for (var j = 0, l = keys.length; j < l; j ++) {
        var elem = rowData[keys[j]];
        row.insertCell().innerText = elem;
    }
}

Wenn ich mit document.createElement und appendChild eine Tabelle erstelle, erhalte ich die Reihenfolge, die ich erwarten würde:

AppendChild pic

Erzeugt von:

// now do the same thing, but using appendChild
var byChildTable = document.createElement("table");
byChildTable.setAttribute("class", "table");
thead = byChildTable.appendChild(document.createElement("thead"));
thRow = thead.appendChild(document.createElement("tr"));

// create table header
thRow.appendChild(document.createElement("td")).innerText = "#";
for (var i = 0, l = keys.length; i < l; i ++) {
    var key = keys[i];
    thRow.appendChild(document.createElement("td")).innerText = key;
}

// insert table data by row
tbody = byChildTable.appendChild(document.createElement("tbody"));
for (var i = 0, l = data.length; i < l; i ++) {
    var rowData = data[i],
        row = tbody.appendChild(document.createElement("tr"));
    row.appendChild(document.createElement("td")).innerText = i;
    for (var j = 0, l = keys.length; j < l; j ++) {
        var elem = rowData[keys[j]];
        row.appendChild(document.createElement("td")).innerText = elem;
    }
}

Frage

Wie kontrolliere ich die Reihenfolge, in der die Elemente im DOM platziert werden? Gibt es eine Möglichkeit, dies zu ändern? Ich denke, sonst könnte ich in umgekehrter Reihenfolge durchlaufen, aber selbst auf diese Weise können Sie mit table.insertRow() immer noch nicht einfügen. Es ist nur ein Dummkopf, weil die Methoden insertRow() und insertCell() viel klarer erscheinen als table.appendChild(document.createElement("tr")) usw.

16
Jeff Tratner

Die .insertRow- und .insertCell-Methoden benötigen einen Index. In Abwesenheit des Indexes ist der Standardwert in den meisten Browsern -1. Einige Browser verwenden jedoch 0 oder geben möglicherweise einen Fehler aus. Daher empfiehlt es sich, dies explizit anzugeben.

Geben Sie stattdessen einfach -1 ein, und ein Anhang wird ausgeführt

var row = table.insertRow(-1);
var cell = row.insertCell(-1);

https://developer.mozilla.org/en-US/docs/DOM/table.insertRow

32
user1106925

Du kannst das:

var table = document.getElementById('myTableId');
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
4
Codingpan

Sie müssen einen Index in insertCell() wie insertCell(inde) angeben, um wie erwartet zu funktionieren.

Wie gesagt in www.w3schools.com/jsref

Wenn dieser Parameter nicht angegeben wird, fügt insertCell () die neue Zelle an der .__ ein. letzte Position in IE und an erster Stelle in Chrome und Safari.

Dieser Parameter ist in Firefox und Opera erforderlich, jedoch optional in Internet Explorer, Chrome und Safari.

Ein Index ist aus demselben Grund auch in inserRow() erforderlich.

2
vortex7

Du kannst das,

var table = document.getElementById("yourTable");
var row = table.insertRow(-1);

var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3); 
0