使用JQuery將數據追加到表格

Question

如何在表格中追加json數據。 Json數據格式{"FirstName":"Cho" ,"LastName":"Chee","Company":"solution"}。此代碼未按預期顯示數據。

jQuery代碼：

var uri = 'api/Employee/GetData'; 
$(document).ready(function() { 
$.getJSON(uri) 
    .done(function (data) { 
     $.each(data, function (key, item) { 
      $('<li>', { text: formatItem(item) }).appendTo($("#tbdata")); 
     }); 
    }); 
}); 

function formatItem(item) { 
return item.FirstName + ' ' + item.LastName + ' ' + item.Company; 
} 

HTML表：

<table class="table-bordered table-striped table table-hover" id="tbdata"> 
    <tr> 
    <th>First Name</th> 
    <th>Last Name</th> 
    <th>Company</th> 
    </tr> 
    </table> 

Answer 1

看看下面的代碼片段。我假設你會從你的服務器獲取數據。

function formatItem(item) { 
 
return '<td>'+item.FirstName + '</td> <td> ' + item.LastName + ' </td><td>' + item.Company+'</td>'; 
 
} 
 

 
var data = [ 
 
{"FirstName":"Cho","LastName":"Chee","Company":"solution"}, 
 
{"FirstName":"Cho1","LastName":"Chee1","Company":"solution1"}, 
 
{"FirstName":"Cho2","LastName":"Chee2","Company":"solution2"}, 
 
]; 
 

 
$.each(data, function (key, item) { 
 

 
      $('<tr>', { html: formatItem(item) }).appendTo($("#tbdata")); 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<table class="table-bordered table-striped table table-hover" id="tbdata"> 
 
    <tr> 
 
    <th>First Name</th> 
 
    <th>Last Name</th> 
 
    <th>Company</th> 
 
    </tr> 
 
    </table>

Answer 2

你需要添加與表數據單元的每個項目屬性整個錶行。另外，你想把這個添加到表體中而不是作爲一個整體。我會做這樣的：

HTML：

<table class="table-bordered table-striped table table-hover"> 
<thead> 
    <tr> 
     <th>First Name</th> 
     <th>Last Name</th> 
     <th>Company</th> 
    </tr> 
</thead> 
<tbody id="tbdata"> 
<!-- data will go here --> 
</tbody> 
</table> 

的Javascript：？！

$(document).ready(function() { 
$.getJSON(uri) 
    .done(function (data) { 
     var html = ""; 
     $.each(data, function (key, item) { 
      html += formatItem(item); 
     }); 
     $("#tbdata").append(html); 
    }); 
}); 
function formatItem(item) { 
    return '<tr><td>' item.FirstName + '</td><td>' + item.LastName + '</td><td>' + item.Company + '</td></tr>'; 
}