web-dev-qa-db-fra.com

Comment insérer une ligne à la fin de la table avec HTMLTableElement.insertRow

Contexte et configuration

J'essaie de créer une table à partir de données tabulaires en javascript, mais lorsque j'essaie d'insérer des lignes dans un élément de table, elle est insérée dans l'ordre inverse de ce que j'attends et dans l'ordre inverse de l'utilisation de appendChild. (Voici un jsfiddle avec une démo en direct de cela).

Dis que j'ai des données comme celle-ci:

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

Si j'essaie d'utiliser les méthodes insertRow() et insertCell() pour créer des tables, itérer sur les données et les clés ci-dessus. Je reçois l'ordre inverse de ce que j'attends:

InsertRows pic

Généré en utilisant le code suivant:

// 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;
    }
}

Par contre, si je crée une table en utilisant document.createElement et appendChild, je reçois la commande à laquelle je m'attendrais:

AppendChild pic

Généré par:

// 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;
    }
}

Question

Comment contrôler l'ordre dans lequel les éléments sont placés dans le DOM? Est-ce qu'il y a une façon de changer ceci-ci? Je suppose que sinon, je pourrais itérer dans l'ordre inverse, mais même ainsi, vous ne pouvez toujours pas insérer avec table.insertRow(). C'est juste une déception parce que les méthodes insertRow() et insertCell() semblent beaucoup plus claires que table.appendChild(document.createElement("tr")) etc.

javascripthtmldomhtml-table
16
Jeff Tratner

Les méthodes .insertRow et .insertCell prennent un index. En l'absence de l'index, la valeur par défaut est -1 dans la plupart des navigateurs. Toutefois, certains navigateurs peuvent utiliser 0 ou générer une erreur. Il est donc préférable de l'indiquer explicitement.

Pour ajouter un append, il suffit de fournir -1, et un ajout sera fait

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

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

32
user1106925

Tu peux le faire:

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

Vous devez spécifier un index dans insertCell() comme insertCell(inde) afin de fonctionner comme prévu.

Comme il est dit dans www.w3schools.com/jsref

Si ce paramètre est omis, insertCell () insère la nouvelle cellule dans le fichier dernière position dans IE et première position dans Chrome et Safari.

Ce paramètre est requis dans Firefox et Opera, mais facultatif dans Internet Explorer, Chrome et Safari.

Un index est également requis dans inserRow() pour la même raison.

2
vortex7

Tu peux le faire,

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
sammani anuththara