Javascript 没有jQuery的JS上的动态html表

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

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

要阅读有关DOM表方法的更多信息：

OP解决方案

---

为什么不使用jQuery？jQuery只占用32kb的空间，为什么不使用它呢。使用它可以节省你很多时间。。。在没有jQuery的情况下做这样的事情只是想再次发明轮子。您应该能够从中推断：）但我同意这些评论，为什么不使用jQuery或任何其他框架。首先，我想清楚地了解它在没有jQuery的情况下是如何工作的，然后在下一步比较两种方法。@Smit oops，我不知道这个限制。。。

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];

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

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