Question

所以，我得到一些json数据并迭代结果并根据结果值填充表。我实际上想要填充两个具有相同结果的表并尝试以下代码：

$.getJSON( "helpers.php", {
})
.done(function( rows ) {
    $.each(rows, function() {
        // populate the table
        var row = $('<tr>');
        var position = $('<td>').html(this.position);    
        var teamname = $('<td>').html(this.team);
        var points = $('<td>').html(this.points);
        row.append(position,teamname,points);
        $('#table-one').append(row);
        $('#table-two').append(row);  
    });
});

如果我注释掉要追加的任何一个表，那么它是有效的，即只附加到一个或另一个，但不是两者。不知道为什么这不起作用，但任何解释和代码修复都很受欢迎。

Answer 1

请参阅http://api.jquery.com/clone/

你只需改变最后两行：

row.appendTo('#table-one');
row.clone().appendTo('#table-two');

Answer 2

当您.append()现有元素时，元素将被移动。试试这个：

row.append(position,teamname,points);
var rowHtml = row.wrap('<div/>').parent().html();
$('#table-one').append(rowHtml);
$('#table-two').append(rowHtml);

Answer 3

您正尝试将相同的DOM节点添加到两个不同的父节点。您需要创建两个匹配的HTML / DOM结构，并在每个表中附加一个：

function createRow(positionVal, teamVal, pointsVal) {
        var row = $('<tr>');
        var position = $('<td>').html(positionVal);    
        var teamname = $('<td>').html(teamVal);
        var points = $('<td>').html(pointsVal);
        row.append(position,teamname,points);

        return row;
}

$.getJSON( "helpers.php", {
})
.done(function( rows ) {
    $.each(rows, function() {
        // populate the table
        $('#table-one').append(createRow(this.position, this.team, this.points));
        $('#table-two').append(createRow(this.position, this.team, this.points));  
    });
});

jQuery - 将行附加到两个表

3 个答案: