Question

亲爱的我想使用来自PHP文件的JSON格式数据动态加载表数据。我尝试了下面的一个，但没有看到表中显示的任何数据。

function loadTable() {
    $.getJSON( 'sort.php', function( data ) {
        $.each( data, function( i, val ) {
            $('#most_active tr:eq(i)').after(
                '<tr>'+
                    '<td>'+val.value1+'</td>'+
                    '<td>'+val.value2+'</td>'+
                    '<td>'+val.value3'</td>'+
                    '<td>'+val.data+'</td>'+
                '</tr>'
            );
        });
    });
}

如果我尝试使用0代替'i'的第二个，我得到所有的值，但是顺序错误，JSON中的最后一个成为表中的第一个。

function loadTable() {
    $.getJSON( 'sort.php', function( data ) {
        $.each( data, function( i, val ) {
            $('#most_active tr:eq(0)').after(
                '<tr>'+
                    '<td>'+val.value1+'</td>'+
                    '<td>'+val.value2+'</td>'+
                    '<td>'+val.value3'</td>'+
                    '<td>'+val.data+'</td>'+
                '</tr>'
            );
        });
    });
}

是否有任何建议可以正确地检索和填充表格，并采用相同的JSON向量顺序？

由于

与表

相关的代码部分

<table id="most_activeAP" class="table table-hover">
    <thead>
        <tr>
            <th>Name</th>
            <th>Value</th>
            <th>Value</th>
            <th>Time</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

Answer 1

您是否尝试过如下创建选择器...

function loadTable()
{
    $.getJSON( 'sort.php', function( data )
    {
        $.each( data, function( i, val )
        {
            $('#most_active tr:eq(' + i + ')').after('<tr><td>'+val.value1+'</td><td>'+val.value2+'</td><td>'+val.value3'</td><td>'+val.data+'</td></tr>');
        });
    });
}

Answer 2

你最好使用.eq（）函数

function loadTable() {
    $.getJSON( 'sort.php', function( data ) {
        $.each( data, function( i, val ) {
            $('#most_active tr').eq(i).after(
                '<tr>'+
                    '<td>'+val.value1+'</td>'+
                    '<td>'+val.value2+'</td>'+
                    '<td>'+val.value3'</td>'+
                    '<td>'+val.data+'</td>'+
                '</tr>'
            );
        });
    });
}

这也意味着您可以构建一次元素列表并重复使用它：

function loadTable() {
    $.getJSON( 'sort.php', function( data ) {
        var $mostActiveRows = $('#most_active tr');
        $.each( data, function( i, val ) {      
            $mostActiveRows.eq(i).after(
                '<tr>'+
                    '<td>'+val.value1+'</td>'+
                    '<td>'+val.value2+'</td>'+
                    '<td>'+val.value3'</td>'+
                    '<td>'+val.data+'</td>'+
                '</tr>'
            );
        });
    });
}

第二个版本的效率会更高一些（浪费更少）。

动态创建Jquery选择器

2 个答案: