21

背景とセットアップ

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一方、 andを使用してテーブルを作成すると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()andメソッドはetcinsertCell()よりもはるかに明確に見えるため、これは残念です。table.appendChild(document.createElement("tr"))

4

4 に答える 4

41

.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

于 2013-04-07T19:16:17.497 に答える
4

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

var table = document.getElementById('myTableId');
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
于 2015-11-17T19:21:48.973 に答える
2

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

www.w3schools.com/jsrefで言われているように

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

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

inserRow()にも同様の理由で索引が必要です。

于 2013-04-07T19:16:53.870 に答える