Question

我正在尝试使用应具有以下HTML

的jquery创建表

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

Answer 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对象上无法正常工作。

Answer 2

您可以尝试：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));

Answer 3

您必须更改以下代码。

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

Answer 4

您应该使用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

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

如何创建HTML表的tr和th

5 个答案: