javascript - 没有 jQuery 的 JS 上的动态 html 表

Question

如何在JS上做动态html表格？如何做得更好（appendChild 或 innerHTML）而不使用 jQuery。例如，我必须有 6 个按钮：

• 添加行开始表格；
• 将行添加到中间；
• 将行添加到末尾；
• 删除第一行；
• 删除中间行；
• 删除最后一行；

Answer 1

var table=document.getElementById('table')
    var x;
    for( var j=0; j<list.length; j++){
        x=table.insertRow(-1);
        for(var i=0; i<40; i++)
            x.insertCell(i).innerHTML=list[j][i];

这就是我制作动态表的方式。之后，您可以索引要添加或删除的行。这一切都是在 JS 中使用 DOM 属性完成的（我不太了解 JQ，但我确定您可以翻译）使用这种方法，您可以添加一个查找表格中间行的函数。此外，如果您想让用户更轻松地在表中的任何位置添加行或删除行，则此方法允许这样做，因为它将根据您发送的索引动态添加它

table.deleteRow(table.rows.length-1);//deletes last row
table.deleteRow(0); //deletes first row

要阅读有关 DOM 表方法的更多信息：http ://www.javascriptkit.com/domref/tablemethods.shtml

Answer 2

OP的解决方案。

function addRow(val) {
    // Get a reference to the table
    var tbl = document.getElementById('mytable');
    var lastRow = tbl.rows.length;
    var tmp = 1;
    if (val == 1) tmp = 1;
    if (val == 2) tmp = lastRow / 2;
    if (val == 3) tmp = lastRow - 1;

    // Insert a row in the table at row index  
    var newRow = tbl.insertRow(tmp);

    // Insert a cell in the row at index 0 1 2 3
    var newCell = newRow.insertCell(0);
    var newCell1 = newRow.insertCell(1);
    var newCell2 = newRow.insertCell(2);
    var newCell3 = newRow.insertCell(3);

    // Append a text node to the cell
    var newText = document.createTextNode('New row')
    newCell.appendChild(newText);
}


function removeLast() {
    var tbl = document.getElementById('mytable');
    var lastRow = tbl.rows.length;
    if (lastRow > 2) tbl.deleteRow(lastRow - 2);
}


function removeFirst() {
    var tbl = document.getElementById('mytable');
    var lastRow = tbl.rows.length;
    if (lastRow > 2) tbl.deleteRow(1);
}


function removeMiddle() {
    var tbl = document.getElementById('mytable');
    var lastRow = tbl.rows.length;
    if (lastRow > 2) tbl.deleteRow(lastRow / 2 - 1);
}