it-roy-ru.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")) и т.д.

16
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

32
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