weixin_33713503 2011-01-02 07:28 采纳率: 0%
浏览 15

向表添加动态数据

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?

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

Then the ajax data is as shown below

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  );
  • 写回答

4条回答 默认 最新

  • weixin_33725272 2011-01-02 07:30
    关注

    You can solve this by making two changes.

    You can modify you html as

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

    Using jquery templates it can be solved as given below

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

    评论

报告相同问题?

悬赏问题

  • ¥15 matlab数字图像处理频率域滤波
  • ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
  • ¥15 ELGamal和paillier计算效率谁快?
  • ¥15 file converter 转换格式失败 报错 Error marking filters as finished,如何解决?
  • ¥15 ubuntu系统下挂载磁盘上执行./提示权限不够
  • ¥15 Arcgis相交分析无法绘制一个或多个图形
  • ¥15 关于#r语言#的问题:差异分析前数据准备,报错Error in data[, sampleName1] : subscript out of bounds请问怎么解决呀以下是全部代码:
  • ¥15 seatunnel-web使用SQL组件时候后台报错,无法找到表格
  • ¥15 fpga自动售货机数码管(相关搜索:数字时钟)
  • ¥15 用前端向数据库插入数据,通过debug发现数据能走到后端,但是放行之后就会提示错误