如何通過javascript代碼添加整個表格？

Question

我正在嘗試使用 js 函數將表格添加到 HTML 頁面中。
我看到了許多從現有表中添加\\刪除數據的示例，但找不到添加以前不存在的新表的示例。
我在我的 javascript 變量中包含了我需要的表格的所有信息，現在我只需要找到一種方法來做到這一點……假設我的變量是 v1、v2、v3、v4，我想創建以下內容桌子：

v1  v2
v3  v4

執行上述操作的正確代碼是什么？

Answer 1

var v1 = 'v1', 
    v2 = 'v2', 
    v3 = 'v3', 
    v4 = 'v4';

var table = document.createElement('table');

var row = table.insertRow(0);
row.insertCell(0).innerHTML = v1;
row.insertCell(1).innerHTML = v2;

row = table.insertRow(1);
row.insertCell(0).innerHTML = v3;
row.insertCell(1).innerHTML = v4;

document.body.appendChild( table );

示例： http : //jsfiddle.net/XPpNF/1/

Answer 2

從var tableElem = document.createElement('table')

Answer 3

這里的很多答案應該已經有用了。

但！ 某些版本的 Internet Explorer 無法在創建<table>元素后更改其內容。 所以你不能總是使用tableElement.appendChild(trElement)例如。

但是您可以使用innerHTML來替換表格的 html 內容 - 這是有效的。

Answer 4

假設您使用的是 jQuery，那將類似於

var awesomeTable = $("<table/>");
$("#parentElement").append(awesomeTable);

var awesomeTr = $("<tr/>");
awesomeTable.append(awesomeTr);

awesomeTr
    .append($("<td/>", {html: v1}))
    .append($("<td/>", {html: v2}))
    .append($("<td/>", {html: v3}))
    .append($("<td/>", {html: v4}));

Answer 5

只需創建表格的 html 代碼並將其添加到現有 div 中，例如：

var html = "<table";
html += "<tr><td>v1</td><td>v2</td></tr>";
html += "<tr><td>v3</td><td>v4</td></tr>";
html += "</table>";
document.getElementById('idOfYourDiv').innerHTML = html;

您還可以使用 document.createElement(table) 構建表格並在表格內創建所有元素，但使用字符串的第一種方法更快。

希望這可以幫助

Answer 6

您可以使用 jQuery 附加您創建的代碼（即使對於您需要的不是強制性的）：

var table += <table>
table += <tr> ... loop over your data variables to fill data ...
table += </tr>
table += </table>
§("# your wished table-id").html(data);

Patrik 給出的建議肯定更優雅。 這個可以讓你創建每個單獨的標簽，這樣你就可以根據需要直接插入額外的樣式屬性。