Question

我正在尝试使用js函数将表添加到HTML页面中我看到了许多添加\从现有表中删除数据的示例，但找不到添加之前不存在的新表的示例。
我在我的javascript变量里面有我需要的所有信息表，现在我只需要找到一种方法来做到这一点...让我假设我的var是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}));

如果你不使用jQuery，我谦卑地建议你完全应该。

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给出的建议肯定更优雅。这个可以让你创建每个单独的标签，这样就可以根据需要直接插入额外的样式属性。

如何通过javascript代码添加整个表？

6 个答案: