Question

我有一个ajax方法，用json数据填充表中的行

$.ajax({
    url: '@Url.Action("Method", "Controller")',
    type: 'GET',
    dataType: 'json',
    contentType: 'application/json; charset=utf-8',
    success: function (data) {
        $.each(data, function (i, item) {
            $('#mp tr:eq(1) td:eq(1)').html(item).appendTo('#data');                    
        });
    }
});

执行方法后我在表格中的行（json中的两个项目）：

<table id="mp">
    <tr id="data">
        <td>Data</td>
        <td></td>
        <td></td>
        <td>56</td>
        <td>85</td>
    <tr></tr>
</table>

但是如果json数据中只有2个项目，它们会在填充后显示在行的最后2列中，但前两列是空的。如何填充第一列，而不是最后一列？看起来像这样：

<table id="mp">
    <tr id="data">
        <td>Data</td>
        <td>56</td>
        <td>85</td>
        <td></td>
        <td></td>
    </tr>
    <tr></tr>
</table>

Answer 1

问题是appendTo()会将元素移动到tr

中的最后一个位置

尝试使用当前数据项的索引

访问td

$.ajax({
    url: '@Url.Action("Method", "Controller")',
    type: 'GET',
    dataType: 'json',
    contentType: 'application/json; charset=utf-8',
    success: function (data) {
        var $tds = $('#data td');
        $.each(data, function (i, item) {
            $tds.eq(i + 1).html(item);
        });
    }
})

如果没有足够的数据，则jquery append（）具有列的行将第一列留空

1 个答案: