将动态数据添加到表中

Question

将动态数据添加到表中

use*_*780 1 javascript ajax jquery html-table

我的申请表中有以下表格.我有一个ajax请求,它将获取要在表中显示的结果.如何将这些结果添加到表中而不是每次都覆盖标题？

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

Run Code Online (Sandbox Code Playgroud)

然后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" }
];

Run Code Online (Sandbox Code Playgroud)

现在我正在尝试这样的事情,但它没有用

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Aru*_*hny 6

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

您可以将html修改为

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

Run Code Online (Sandbox Code Playgroud)

和脚本一样

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

Run Code Online (Sandbox Code Playgroud)

你可以找到一个解决方案的工作在这里.

但是为此目的构建了一个名为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>

Run Code Online (Sandbox Code Playgroud)

但是如果你对此感兴趣,你可以深入研究其他一些插件,比如dataTables或jqgrid,它们是使用jQuery的非常好的网格数据框架.

我肯定会建议使用某种形式的模板解决方案.像这样通过将HTML混合到JavaScript中来手工构建表只会引起令人头疼的问题,而且很可能是你很久以后出现并且必须维护最终会受到影响的代码的穷人:) (2认同)

归档时间：	14 年，11 月前
查看次数：	22156 次
最近记录：	7 年，2 月前