堆棧內存溢出
  簡體   English   中英

用JavaScript將TR附加到表格的最簡單方法是什么？

[英]what's the easiest method to append a TR to a table by javascript?

 原文  2009-05-29 14:22:33  1   7    javascript/ dom

問題描述

如果表ID是已知的-則可以通過docoument.getElementById(table_id)獲得docoument.getElementById(table_id) -如何以最簡單的方式將TR元素附加到該表？

TR如下： 

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

7 個解決方案

解決方案1
 9 已采納  2009-05-29 14:26:09

第一個使用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);

要么 

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

解決方案2
 3  2009-05-29 14:25:59

使用jQuery： 

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

我知道有些人可能不願提及jQuery。 包括一個僅做一件事情的框架可能就太過分了。 但是我很少發現我只需要對javascript做“一件事”。 手工編碼的解決方案是創建所需的每個元素，然后以適當的順序（從內部到外部）將它們添加到其他元素，然后最后將新行添加到表中。

解決方案3
 3  2009-05-29 14:31:38

插入表行的最直接，符合標准和與庫無關的方法是使用表對象的insertRow方法 。 

var tableRef = document.getElementById(tableID);

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

PS也可以在IE6中使用，盡管有時可能會有一些古怪之處。

解決方案4
 0  2009-05-29 14:26:42

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

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

要么 

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

解決方案5
 0  2009-05-29 14:27:44

真正簡單的例子： 

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

解決方案6
 0  2009-05-29 14:37:19

我使用此功能將一堆行附加到表中。 它比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是要追加的行

解決方案7
 -2  2009-07-23 04:19:49

我用它，工作輕柔： 

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

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 Javascript將tr附加到表 在IE中的表格中附加tr 要評估的Javascript包含方法 <tr> 或整個桌子 將html字符串附加為表格行（ <tr> ）通過javascript-jquery 通過內容，CSS，Javascript或其他方法格式化基於Web的數據的最簡單方法是什么？ jQuery-將表追加到tr表 如何將tr附加到表的頂部 使用jQuery將td附加到表中的tr JavaScript是否具有類似Ruby的&#39;tr&#39;方法的方法？ 如何在javascript中附加表格&gt;表格中的tr&gt; tbody（已存在的表格）（使用Chrome擴展程序）
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM