如何創建表THEAD和TBODY動態

Question

我有JSON下面的響應，我試圖從循環

{ 
    "columns": ["Country", "DateLastModified"], 
    "data": [ 
     [ 
      ["IND"], 
      ["22:03.4"] 
     ], 
     [ 
      ["US"], 
      ["22:11.0"] 
     ] 
    ] 
} 

我已經試過如下圖所示

function formDataTable(response) 
{ 
     // forming table header  
     var allcolumns = response.columns; 
     var html = "<table><thead>" 
     for (var i = 0; i < allcolumns.length; i++) 
     { 
       html += '<th>' + allcolumns[i] + '</th>'; 
     } 
     html += "</thead></table>" 
     $('#here_table').html(html); 
     // forming table header ends 


     var alldata = response.data; 
     var alldatahtml = ''; 
     for (var j = 0; j < alldata.length; j++) 
     { 
       alldatahtml += '<td>' + alldata[j] + '</td>'; 
     } 
} 

此創建一個表是我的小提琴https://jsfiddle.net/o2gxgz9r/9072/

可否請你讓我知道如何顯示TBODY也

Answer 1

你還沒有附加正文。

$('#here_table table').append(alldatahtml); 

而且你還需要2個循環內的tds。

for (var j = 0; j < alldata.length; j++) 
     { 
       alldatahtml += '<tr>'; 
       alldatahtml += '<td>' + alldata[j][0] + '</td>'; 
       alldatahtml += '<td>' + alldata[j][1] + '</td>'; 
       alldatahtml += '</tr>'; 
     } 

https://jsfiddle.net/o2gxgz9r/9075/

Answer 2

使用after()追加後thead這樣$('#here_table table thead').after(alldatahtml);

var alldata = response.data; 
     var alldatahtml = '<tbody>'; 
     for (var j = 0; j < alldata.length; j++) 
     { 
       alldatahtml += '<tr><td>' + alldata[j][0] + '</td><td>' + alldata[j][1] + '</td></tr>'; 
     } 

     alldatahtml+='</tbody>'; 

     $('#here_table table thead').after(alldatahtml); 

$(document).ready(function() { 
 
    
 
    var response = { 
 
\t "columns": ["Country", "DateLastModified"], 
 
\t "data": [ 
 
\t \t [ 
 
\t \t \t ["IND"], 
 
\t \t \t ["22:03.4"] 
 
\t \t ], 
 
\t \t [ 
 
\t \t \t ["US"], 
 
\t \t \t ["22:11.0"] 
 
\t \t ] 
 
\t ] 
 
}; 
 

 
formDataTable(response); 
 

 
function formDataTable(response) 
 
{ 
 
     // forming table header \t 
 
     var allcolumns = response.columns; 
 
     var html = "<table><thead>" 
 
     for (var i = 0; i < allcolumns.length; i++) 
 
     { 
 
       html += '<th>' + allcolumns[i] + '</th>'; 
 
     } 
 
     html += "</thead></table>" 
 
     $('#here_table').html(html); 
 
     // forming table header ends 
 

 
     
 
     var alldata = response.data; 
 
     var alldatahtml = '<tbody>'; 
 
     for (var j = 0; j < alldata.length; j++) 
 
     { 
 
       alldatahtml += '<tr><td>' + alldata[j][0] + '</td><td>' + alldata[j][1] + '</td></tr>'; 
 
     } 
 
     
 
     alldatahtml+='</tbody>'; 
 
     
 
     $('#here_table table thead').after(alldatahtml); 
 
} 
 
    
 
    
 
    
 
});

thead {color:green;} 
 
tbody {color:blue;} 
 
tfoot {color:red;} 
 

 
table, th, td { 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="here_table"></div>

Answer 3

只需使用JS ES6 Templates String和map

$('#here_table').html(` 
    <table> 
     <thead> 
      ${response.columns.map(head => `<th>${head}</th>`).join('')} 
     </thead> 
     <tbody> 
      ${response.data.map(line => `<tr>${line.map(el => `<td>${el}</td>`).join('')}</tr>`).join('')} 
     </tbody> 
    </table> 
`) 

Try it

Answer 4

$(document).ready(function() { 
 
    
 
    var response = { 
 
\t "columns": ["Country", "DateLastModified"], 
 
\t "data": [ 
 
\t \t [ 
 
\t \t \t ["IND"], 
 
\t \t \t ["22:03.4"] 
 
\t \t ], 
 
\t \t [ 
 
\t \t \t ["US"], 
 
\t \t \t ["22:11.0"] 
 
\t \t ] 
 
\t ] 
 
}; 
 

 
formDataTable(response); 
 

 
function formDataTable(response) 
 
{ 
 
    var allcolumns = response.columns; 
 
    var $table = $('<table>'); 
 
    var $thead = $('<thead>').appendTo($table); 
 
    $(allcolumns).each(function(i){ 
 
     
 
     var $th = $('<th>',{'html':allcolumns[i]}).appendTo($thead); 
 
    }); 
 
    
 
    var allData = response.data; 
 
    var $tbody = $('<tbody>').appendTo($table); 
 
    $(allData).each(function(j){ 
 
     $tr = $('<tr>').appendTo($tbody); 
 
     $(allData[j]).each(function(k){ 
 
     var $td = $('<td>',{'html':allData[j][k]}).appendTo($tr); 
 
     }); 
 
    }); 
 
    $("#here_table").html($table); 
 
} 
 
    
 
    
 
    
 
});

thead {color:green;} 
 
tbody {color:blue;} 
 
tfoot {color:red;} 
 

 
table, th, td { 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="here_table"></div>

在這裏，您可以用這個代碼去..它可能會幫助你:)

更新

在這裏，您可以動態地使用每個迴路抽籤表。

它將動態rander數據，並會在你的HTML追加。