如何創建TR和第一個HTML表格

Question

的我試圖做一個表使用jquery應該有下面的HTML

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

我有串columnKeys的數組包含th元素列名。我已經有了一個表格元素。我想附加thead和使用jquery的其他元素。

<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的這可能會導致一些混亂，一些JQuery的對象如預期的JavaScript將無法正常工作。

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

嘗試使用核心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/

Answer 4

你必須改變如下面的代碼。

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 5

您應該使用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