向表中添加动态数据答案

【问题标题】：Adding dynamic data to a table向表中添加动态数据
【发布时间】：2011-06-02 10:19:19
【问题描述】：

我的应用程序中有下表。我有一个 ajax 请求，它将获取要显示在表中的结果。如何在不每次都覆盖表头的情况下将这些结果添加到表中？

<table id="itemList">
    <td>Name</td>
    <td>Price</td>
    <td>Quantity</td>
    <td>Total</td>
</table>

那么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" }
];

现在我正在尝试这样的事情，但它不起作用

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

【问题讨论】：

标签： javascript jquery ajax html-table

【解决方案1】：

您可以通过进行两项更改来解决此问题。

你可以修改你的html为

<table id="itemList">
    <thead>
        <tr>
            <td>Name</td>
            <td>Price</td>
            <td>Quantity</td>
            <td>Total</td>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

脚本为

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

您可以找到有效的解决方案here。

但是为此目的构建了一个名为 templates 的 jquery 插件。

使用 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>

但是，如果您有兴趣，可以深入了解其他一些插件，例如 dataTables 或 jqgrid，它们是使用 jQuery 的非常好的网格数据框架。

【讨论】：

+ 1在thead 中使用th 而不是td 元素可能也很好。此外，在构建用于显示的标记时，在我遇到的每个实现中构建一个字符串 sn-ps 数组然后使用.join('') 将它们连接到一个字符串末尾会更快，而不是不断地进行字符串连接.
我肯定会推荐使用某种形式的模板解决方案。像这样通过将 HTML 混合到您的 JavaScript 中手动构建表格只会在以后引起头痛，而且很可能是在您离开很久之后出现并且必须维护您的代码的可怜的家伙最终会受到影响:)
@Crowder 是的，你是对的，这是复制粘贴错误。最好在thead 下使用th。感谢使用数组 join() 而不是一直使用字符串连接所带来的性能提升。为了以后的发展，我会牢记在心。你能告诉我性能变化的任何具体原因吗>
@jmort 是的，你是绝对正确的。我会选择模板基础解决方案或使用 jqgrid。（注意：microsoft/jquery 模板仍处于测试阶段，所以我认为在生产环境中使用它不是一个好主意）
实际上，我认为这就是使用它的更多理由。一旦你的产品上市，现在处于测试阶段的东西可能不会处于测试阶段。当您生产最终产品时，现在正在生产的东西可能已经过时了。在发布第一个版本之前，不要让自己陷入过时的默默无闻:)

【解决方案2】：

当您使用 JQuery 时，请查看JQuery Temaplate。可能看起来有点复杂，但它会是一个更好的方法，IMO。

【讨论】：

【解决方案3】：

欢迎来到 2011 年！新年快乐！我们生活在一个美好而激动人心的时代！ Web 开发人员再也不用担心再次手动构建表格的细节......永远。

http://datatables.net/ 几乎可以解决您可能想到的任何问题。这个插件的开发者已经想到了这一切。他们已经解决了这个问题，因此您不必这样做，这使您可以专注于您的业务目标。

这个 JQuery 插件有多强大，我怎么强调都不为过。请查看他们网站上的所有众多示例。他们甚至有一个如何动态添加行的示例：http://datatables.net/examples/api/add_row.html。

免责声明：我与 DataTables 的开发无关。我对此感到非常兴奋，因为它让我的生活变得如此轻松。

【讨论】：

【解决方案4】：

表结构错误，需要使用<tbody>和<thead>，here is a working fiddle。

<table id="itemList">
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
</thead>
<tbody>
</tbody>

【讨论】：

StackOverflow 是独立的。一定要提供一个活生生的例子的链接，但要在答案本身中包含所有相关的标记和代码（以及对你所做的事情的解释）。外部链接可以移动、删除等。
是的，我同意。当有 0 个答案时，我从这个例子开始。我 am 目前正在详细说明，但有点晚了......考虑到 Arun 打败了我。最佳实践：删除还是完成？