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

没有jQuery的JS上的动态html表

2 个答案: