使用jQuery从Ajax响应(Json)构建表行

前端之家收集整理的这篇文章主要介绍了使用jQuery从Ajax响应(Json)构建表行前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
可能重复 Nested elements

我从服务器端的ajax响应(Json),我试图动态创建表行
并将它们附加到现有表(ID:#records_table);

我试图实现可能重复的解决方案,但它失败。

我的反应如下:

"[{
      "rank":"9","content":"Alon","UID":"5"
     },{
       "rank":"6","content":"Tala","UID":"6"
    }]"

需求结果是这样的:

<tr>
   <td>9</td>
   <td>Alon</td>
   <td>5</td>  
</tr>
<tr>
   <td>6</td>
   <td>Tala</td>
   <td>5</td>  
</tr>

我想做一些事情,而不解析Json,所以我试图做以下,这当然是一场灾难:

function responseHandler(response)
    {

        $(function() {
            $.each(response,function(i,item) {
                $('<tr>').html(
                    $('td').text(item.rank),$('td').text(item.content),$('td').text(item.UID)
                ).appendTo('#records_table');

            });
        });


    }

从我的解决方案,我只有一行与所有单元格中的数字6。我究竟做错了什么?

解决方法

请使用.append而不是.html
var response = "[{
      "rank":"9","UID":"6"
    }]";

// convert string to JSON
response = $.parseJSON(response);

$(function() {
    $.each(response,item) {
        var $tr = $('<tr>').append(
            $('<td>').text(item.rank),$('<td>').text(item.content),$('<td>').text(item.UID)
        ); //.appendTo('#records_table');
        console.log($tr.wrap('<p>').html());
    });
});

猜你在找的jQuery相关文章