Замена элементов HTML на месте

У меня есть таблица, которую я генерирую со следующими js:

var tbl = document.createElement('table');
var tbdy = document.createElement('tbody');
var thd = document.createElement('thead');

var Headings = ["Lun","File","CDROM","Removable","ReadOnly","NoFUA"];
var tr = document.createElement('tr');
for (var i = 0; i < Headings.length; i++) {
    var td = document.createElement('td');
    td.appendChild(document.createTextNode(Headings[i]))
    tr.appendChild(td);
}
thd.appendChild(tr);

for (var lun in data) {
    console.log(lun);
    var tr = document.createElement('tr');
    tr.appendChild(document.createElement('td').appendChild(document.createTextNode(lun)));

    for (var info in data[lun]) {
        var td = document.createElement('td');
        td.appendChild(document.createTextNode(data[lun][info]))
        tr.appendChild(td)
    }
    tbdy.appendChild(tr);
}
tbl.appendChild(thd);
tbl.appendChild(tbdy);
var table = document.getElementById('file-table');

и следующий соответствующий HTML:

<table id="file-table" style="width:100%"></table>

метод appendChild, который вы видите в последней строке js, работает, однако целью создания таблицы с помощью js является полная замена всех дочерних узлов 'file-table'.

Я пробовал перебирать дочерние узлы и использовать метод removeChild, но это дает некоторые интересные результаты — не будет полностью удалять все узлы, а иногда и сообщение об ошибке о том, что первый параметр не является узлом.

Есть идеи?


javascript html nodes appendchild removechild
person Sterling Butters    schedule 11.02.2020    source источник
comment
Любопытно, почему вы динамически создаете таблицу, а затем добавляете ее в другую таблицу.   -  person EternalHour    schedule 12.02.2020

Ответы (1)


arrow_upward
0
arrow_downward

Не могли бы вы выбрать целевые элементы и обновить их напрямую?

document.getElementById('td1').innerHTML = "Some text to enter"

Если нет, вы также можете заменить тело таблицы:

var new_tbody = document.createElement('tbody');
populate_with_new_rows(new_tbody);
old_tbody.parentNode.replaceChild(new_tbody, old_tbody)
person Greg    schedule 11.02.2020
comment
Ваш вариант 2 выглядит привлекательно, я посмотрю на это - person Sterling Butters; 12.02.2020