Javascript 向表中添加动态数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4577559/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding dynamic data to a table
提问by user559780
I've the following table in my application. I've a ajax request which will fetch the results to be shown in the table. How add these results to the table without overriding the header every time?
我的应用程序中有下表。我有一个 ajax 请求，它将获取要显示在表中的结果。如何将这些结果添加到表中而不每次都覆盖标题？
<table id="itemList">
<td>Name</td>
<td>Price</td>
<td>Quantity</td>
<td>Total</td>
</table>
Then the ajax data is as shown below
然后ajax数据如下图
var items = [
{ Name: "Apple", Price: "80", Quantity : "3", Total : "240" },
{ Name: "Orance", Price: "50", Quantity : "4", Total : "200" },
{ Name: "Banana", Price: "20", Quantity : "8", Total : "160" },
{ Name: "Cherry", Price: "250", Quantity : "10", Total : "2500" }
];
Now I'm trying something like this but it is not working
现在我正在尝试这样的事情，但它不起作用
var rows = "";
$.each(items, function(){
rows += "<tr><td>" + this.Name + "</td><td>" + this.Price + "</td><td>" + this.Quantity + "</td><td>" + this.Total + "</td></tr>";
});
$( "#itemList" ).text('<tr><td>Name</td><td>Price</td><td>Quantity-</td><td>Total</td></tr>' + rows );
回答by Arun P Johny
You can solve this by making two changes.
您可以通过进行两项更改来解决此问题。
You can modify you html as
您可以将 html 修改为
<table id="itemList">
<thead>
<tr>
<td>Name</td>
<td>Price</td>
<td>Quantity</td>
<td>Total</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
And Script as
和脚本
var rows = "";
$.each(items, function(){
rows += "<tr><td>" + this.Name + "</td><td>" + this.Price + "</td><td>" + this.Quantity + "</td><td>" + this.Total + "</td></tr>";
});
$( rows ).appendTo( "#itemList tbody" );
You can find a working solution here.
您可以在此处找到可行的解决方案。
But a jquery plugin called templatesis built for this purpose.
但是一个名为模板的 jquery 插件就是为此目的而构建的。
Using jquery templates it can be solved as given below
使用jquery模板可以解决如下
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
</head>
<body>
<script id="itemTemplate" type="text/x-jquery-tmpl">
<tr>
<td>${Name}</td>
<td>${Price}</td>
<td>${Quantity}</td>
<td>${Total}</td>
</tr>
</script>
<table id="itemList">
<thead>
<tr>
<td>Name</td>
<td>Price</td>
<td>Quantity</td>
<td>Total</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function(){
var items = [
{ Name: "Apple", Price: "80", Quantity : "3", Total : "240" },
{ Name: "Orance", Price: "50", Quantity : "4", Total : "200" },
{ Name: "Banana", Price: "20", Quantity : "8", Total : "160" },
{ Name: "Cherry", Price: "250", Quantity : "10", Total : "2500" }
];
$( "#itemTemplate" ).tmpl( items ).appendTo( "#itemList tbody" );
});
</script>
</body>
</html>
But if you are further interested you go deep into some other plugins like dataTablesor jqgridwhich are quite good grid data frameworks using jQuery.
但是，如果您进一步感兴趣，您可以深入了解其他一些插件，如dataTables或jqgrid，它们是使用 jQuery 的非常好的网格数据框架。
回答by user559780
As you are working with JQuery, check out the JQuery Temaplate. Might look like little convoluted but it would be a better approach, IMO.
当您使用 JQuery 时，请查看JQuery 模板。可能看起来有点令人费解，但这将是一个更好的方法，IMO。
回答by jmort253
Welcome to 2011! Happy New Year! We live in a wonderful and exciting time! No more does a web developer ever have to worry about the details of manually building a table again... ever.
欢迎来到 2011！新年快乐！我们生活在一个美妙而激动人心的时代！Web 开发人员不再需要担心再次手动构建表格的细节......永远。
http://datatables.net/will solve just about any problem you could possibly conceive. The developers of this plug-in have thought of it all. They've solved this problem so that you don't have to, which allows you to focus on your business goals.
http://datatables.net/将解决您可能想到的任何问题。这个插件的开发者已经想到了这一切。他们已经解决了这个问题，因此您不必这样做，这使您可以专注于您的业务目标。
I can't emphasize enough how powerful this JQuery plug-in is. Please take a look at all of the numerous examples on their site. They even have an example of how to dynamically add a row: http://datatables.net/examples/api/add_row.html.
这个 JQuery 插件有多么强大，我怎么强调都不为过。请查看他们网站上的所有示例。他们甚至有一个如何动态添加行的示例：http: //datatables.net/examples/api/add_row.html。
Disclaimer: I had nothing to do with the development of DataTables. I'm just really excited about it because it's made my life so much easier.
免责声明：我与 DataTables 的开发无关。我真的很兴奋，因为它让我的生活变得更加轻松。
回答by Sandwich
The Table structure was wrong, need to use <tbody>and <thead>, here is a working fiddle.
表结构错误，需要使用<tbody>和<thead>，这里是一个工作小提琴。
<table id="itemList">
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
</thead>
<tbody>
</tbody>
