使用jQuery从AJAX响应构建表行（json）

小编典典

使用jQuery从AJAX响应构建表行（json）

json

我从服务器端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的一行。我究竟做错了什么？

阅读 277

2020-07-27

共1个答案

小编典典

使用.append而不是.html

var response = "[{
      "rank":"9",
      "content":"Alon",
      "UID":"5"
     },
     {
       "rank":"6",
       "content":"Tala",
       "UID":"6"
    }]";

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

$(function() {
    $.each(response, function(i, 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());
    });
});

2020-07-27