如何创建 HTML 表格的 tr 和 th答案

【问题标题】：How to Create tr and th of an HTML table如何创建 HTML 表格的 tr 和 th
【发布时间】：2017-01-03 19:43:14
【问题描述】：

我正在尝试使用 jquery 制作一个应该具有以下 HTML 的表格

<table id="tblProviders">
    <thead>
        <tr>
            <th>Name</th>
            <th>Time (Sec.)</th>
        </tr>
    </thead>
</table>

我有一个字符串数组columnKeys，其中包含th 元素的列名。我已经有一个表格元素。我想使用 jquery 附加 thead 和其余元素。

<table id="tblProviders">

</table>

我尝试关注 jquery，但没有成功。有人可以帮我构建表格元素吗？

var tr = $("#tblProviders").append("tr");
for(var i =0; i< columnKeys.length; i++)
{
    var th = $("#tblProviders").append("th");      // TABLE HEADER.
    th.innerHTML = columnKeys[i];
    tr.append(th);
}

【问题讨论】：

标签： jquery html-table append

【解决方案1】：

试试这个代码。

var $toAttach = $("<thead><tr></tr></thead>");

for (var i = 0; i < columnKeys.length; i++) {
  var $thead = $("<th></th>");
  $thead.text(columnKeys[i]);
  $toAttach.find("tr").append($thead);
}

$("#tblProviders").append($toAttach);

根据您的代码，我认为您的 append() 错误并且混合了 JQuery 和 JavaScript，这可能会导致一些混乱，因为 JavaScript 在某些 JQuery 对象上无法按预期工作。

【讨论】：

这对我有帮助。 +1

【解决方案2】：

您必须像下面这样更改代码。

var columnKeys = ['Test1', 'Test2', 'Test3'];
var th = "";
for(var i =0; i< columnKeys.length; i++)
{
    th += '<th>' + columnKeys[i] + '</th>';      // TABLE HEADER.
}
 var tr = $("<tr>").append($(th));
 $("#tblProviders").append($(tr));

FIDDLE DEMO

【讨论】：

不错的解决方案。 +1

【解决方案3】：

你应该使用jQuery( html, attributes)来创建DOM元素

//Create ROW
var tr = $("<tr>");
for (var i = 0; i < columnKeys.length; i++) {
    //Create HEADER
    var th = $("<th>", {
        html: columnKeys[i]
    });

    //APPEND IT TO ROW
    tr.append(th);
}

$("#tblProviders").append(tr);

DEMO

【讨论】：

不错的解决方案。 +1

【解决方案4】：

你可以试试这个：jsfiddle.net/bharatsing/me6hj1fp/

var columnKeys=["Field1","Field2","Field3","Field4"];
var html="<tr>";
for(var i =0; i< columnKeys.length; i++)
{
    html+="<th>"+columnKeys[i]+"</th>";
}

html+="</tr>";
$("#tblProviders").append($(html));

【讨论】：

有一个问题，当我用数据填充表格时，标题行消失了
如何填充表格数据？

【解决方案5】：

尝试使用核心 JS 代码 -

<table id="tblProviders">

</table>

var columnKeys=["Field1","Field2","Field3","Field4"];
var table = document.getElementById("tblProviders");
var tr_head = document.createElement("tr");
for(var i =0; i< columnKeys.length; i++)
{
    var th_i = document.createElement("th");
    var th_txt_i = document.createTextNode(columnKeys[i]);
    th_i.appendChild(th_txt_i);
    tr_head.appendChild(th_i);
}
table.appendChild(tr_head);

https://jsfiddle.net/me6hj1fp/10/

【讨论】：