Question

如果表id已知 - 所以可以使用docoument.getElementById(table_id)获取表 - 如何以最简单的方式将TR元素附加到该表？

TR如下：

<tr><td><span>something here..</span></td></tr>

Answer 1

第一种使用DOM方法，第二种使用非标准但广泛支持的innerHTML

var tr = document.createElement("tr");
var td = document.createElement("td");
var span = document.createElement("span");
var text = document.createTextNode("something here..");
span.appendChild(text);
td.appendChild(span);
tr.appendChild(td);

tbody.appendChild(tr);

OR

tbody.innerHTML +=  "<tr><td><span>something here..</span></td></tr>"

Answer 2

使用jQuery：

$('#table_id > tbody').append('<tr><td><span>something here..</span></td></tr>');

我知道有些人可能会在提到jQuery时感到畏缩。包括一个只做这件事的框架可能有点矫枉过正。但我很少发现我只需要用javascript“做一件事”。手工编码的解决方案是创建所需的每个元素，然后以适当的顺序（从内到外）添加到其他元素，然后最后将新行添加到表中。

Answer 3

插入表行的最简单，符合标准且与库无关的方法是使用表对象的the insertRow method。

var tableRef = document.getElementById(tableID);

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

P.S。在IE6中也可以使用，但有时可能会有一些怪癖。

Answer 4

如果您不反对使用jQuery，可以使用以下任一项，其中“tblId”是表的id，“_ html”是表行的字符串表示形式：

  $(_html).insertAfter("#tblId tr:last");

或

$("#tblId tr:last").after(_html);

Answer 5

非常简单的例子：

<html>
<table id = 'test'>
   <tr><td>Thanks tvanfosson!</td></tr>
</table>
</html>

<script type="text/javascript" charset="utf-8">
   var table = document.getElementById('test');
   table.innerHTML += '<tr><td><span>something here..</span></td></tr>';
</script>

Answer 6

我使用此函数将一堆行附加到表中。对于大块数据，它比jquery快约100％。唯一的缺点是如果你的行里面有脚本标签，脚本将不会在IE中加载时执行

function appendRows(node, html){
    var temp = document.createElement("div");
    var tbody = node.parentNode;
    var nextSib = node.nextSibling;

    temp.innerHTML = "<table><tbody>"+html;
    var rows = temp.firstChild.firstChild.childNodes;

    while(rows.length){
        tbody.insertBefore(rows[0], nextSib);
    }
}

其中node是要追加的行，而html是要追加的行

Answer 7

我用它，轻轻地工作：

var changeInnerHTMLOfMyCuteTbodyById = function (id_tbody, inner_html)
{ 
     //preparing
     var my_tbody = document.getElementById (id_tbody);
     var my_table = my_tbody.parentNode;

     my_table.removeChild (my_tbody);

     //creating dom tree
     var html = '<table style=\'display:none;\'><tbody id='+ id_tbody+'>' + 
inner_html + '</tbody></table>';

     var tmp_div = document.createElement ('div');

     tmp_div.innerHTML = html;

     document.body.appendChild (tmp_div);

     //moving the tbody
     my_table.appendChild (document.getElementById (id_tbody));
}

你可以这样做：

changeInnerHTMLOfMyCuteTbodyById('id_tbody', document.getElementById ('id_tbody').innerHTML + '<tr> ... </tr>');

通过javascript将TR附加到表的最简单方法是什么？

7 个答案: