向表添加动态数据

Question

I've the following table in my application. 我的应用程序中有下表。 I've a ajax request which will fetch the results to be shown in the table. 我有一个ajax请求，它将获取要在表中显示的结果。 How add these results to the table without overriding the header every time? 如何将这些结果添加到表中而不每次都覆盖标题？

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

Answer 1

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 templates is 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 dataTables or jqgrid which are quite good grid data frameworks using jQuery. 但是，如果您进一步感兴趣，则可以深入研究其他一些插件，例如dataTables或jqgrid ，它们是使用jQuery的很好的网格数据框架。

Answer 2

As you are working with JQuery, check out the JQuery Temaplate . 在使用JQuery时，请查看JQuery Temaplate 。 Might look like little convoluted but it would be a better approach, IMO. IMO看起来似乎有些混乱，但这将是更好的方法。

Answer 3

Welcome to 2011! 欢迎来到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. Web开发人员再也不必担心手动重新构建表的细节了……。

http://datatables.net/ will solve just about any problem you could possibly conceive. http://datatables.net/将解决您可能想到的任何问题。 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. 他们已经解决了这个问题，因此您不必这样做，这使您可以专注于业务目标。

I can't emphasize enough how powerful this JQuery plug-in is. 我不能足够强调这个JQuery插件的功能。 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 . 他们甚至提供了有关如何动态添加行的示例： http : //datatables.net/examples/api/add_row.html 。

Disclaimer: I had nothing to do with the development of DataTables. 免责声明：我与DataTables的开发无关。 I'm just really excited about it because it's made my life so much easier. 我真的很兴奋，因为它使我的生活变得更加轻松。

Answer 4

The Table structure was wrong, need to use <tbody> and <thead> , here is a working fiddle . Table结构错误，需要使用<tbody>和<thead> ，这是一个有效的小提琴。

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

向表添加动态数据

问题描述

4 个解决方案

解决方案1
6 已采纳 2011-01-02 07:30:57

解决方案2
0

解决方案3
0 2011-01-02 07:36:16

解决方案4
0 2011-01-02 07:36:54

向表添加动态数据

问题描述

4 个解决方案

解决方案1 6 已采纳 2011-01-02 07:30:57

解决方案2 0

解决方案3 0 2011-01-02 07:36:16

解决方案4 0 2011-01-02 07:36:54

解决方案1
6 已采纳 2011-01-02 07:30:57

解决方案2
0

解决方案3
0 2011-01-02 07:36:16

解决方案4
0 2011-01-02 07:36:54