web-dev-qa-db-ja.com

HTMLTableElement.insertRowを使用してテーブルの最後に行を挿入する方法

背景と設定

私はjavascriptの表形式データから表を作成しようとしていますが、行を表要素に挿入しようとすると、予想と逆の順序で挿入され、appendChildを使用して得られるものとは逆の順序で挿入されます。 （これは ライブデモを使用したjsfiddle これです）。

次のようなデータがあるとします。

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

テーブルを作成するためにinsertRow()メソッドとinsertCell()メソッドを使用しようとすると、上記のデータとキーを反復処理します。私が期待するものと逆の順序を取得します。

InsertRows pic

次のコードを使用して生成されます。

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

一方、document.createElementとappendChildを使用してテーブルを作成すると、期待する順序が得られます。

AppendChild pic

によって生成されます：

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

質問

DOMに要素を配置する順序を制御するにはどうすればよいですか？これを変更する方法はありますか？そうでなければ、逆の順序で繰り返すことができると思いますが、それでも、table.insertRow()で挿入することはできません。 insertRow()メソッドとinsertCell()メソッドはtable.appendChild(document.createElement("tr"))などよりもはるかに明確だからです。

javascripthtmldomhtml-table
17
Jeff Tratner

.insertRowおよび.insertCellメソッドはインデックスを取得します。インデックスがない場合、デフォルト値は-1ほとんどのブラウザで使用しますが、一部のブラウザでは0またはエラーをスローする可能性があるため、これを明示的に提供することをお勧めします。

代わりに追加するには、-1、および追加が行われます

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

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

33
user1106925

あなたはこれを行うことができます：

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

期待どおりに動作するには、insertCell()のようなinsertCell(inde)でインデックスを指定する必要があります。

www.w3schools.com/jsref で述べられているように

このパラメーターを省略すると、insertCell（）は、IEの最後の位置、およびChromeおよびSafariの最初の位置に新しいセルを挿入します。

このパラメーターは、FirefoxとOperaでは必須ですが、Internet Explorerではオプション、ChromeおよびSafari。

同じ理由で、inserRow()にもインデックスが必要です。

2
vortex7

あなたはこれを行うことができます、

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