Question

我的申请表中有以下表格。我有一个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  );

Answer 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的非常好的网格数据框架。

Answer 2

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

Answer 3

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

http://datatables.net/将解决您可能想到的任何问题。这个插件的开发人员已经想到了这一切。他们已经解决了这个问题，因此您无需这样做，这可以让您专注于您的业务目标。

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

免责声明：我与DataTables的开发无关。我真的很兴奋，因为它让我的生活变得如此简单。

Answer 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>

将动态数据添加到表中

4 个答案: