jQuery-将行追加到两个表

因此，我将获取一些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);  
    });
});

$.getJSON（“helpers.php”{
})
.done（函数（行）{
$.each（行，函数（）{
//填充表格
变量行=$（''）；
var position=$（''）.html（this.position）；
var teamname=$（''）.html（this.team）；
var points=$（''）.html（this.points）；
行。追加（位置、团队名称、点数）；
$（“#表一”）。追加（行）；
$（'表二'）。追加（行）；
});
});

如果我注释掉要追加的表中的任何一个表，即只追加一个或另一个表，但不同时追加两个表，则该方法是有效的。不确定为什么这样做不起作用，但任何解释和代码修复都值得赞赏。

当您

.append（）

一个现有元素时，该元素将被移动。试试这个：

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

row.append（职位、团队名称、积分）；
var rowHtml=row.wrap（“”）.parent（）.html（）；
$（“#表一”）.append（rowHtml）；
$（'#表二'）.append（rowHtml）；

当您

.append（）

现有元素时，该元素将被移动。试试这个：

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

row.append（职位、团队名称、积分）；
var rowHtml=row.wrap（“”）.parent（）.html（）；
$（“#表一”）.append（rowHtml）；
$（'#表二'）.append（rowHtml）；

您正试图将相同的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));  
    });
});

函数createRow（positionVal、teamVal、pointsVal）{
变量行=$（''）；
var position=$（''）.html（positionVal）；
var teamname=$（''）.html（teamVal）；
var points=$（''）.html（pointsVal）；
行。追加（位置、团队名称、点数）；
返回行；
}
$.getJSON（“helpers.php”{
})
.done（函数（行）{
$.each（行，函数（）{
//填充表格
$（“#表一”）.append（createRow（this.position，this.team，this.points））；
$（“#表二”）.append（createRow（this.position，this.team，this.points））；
});
});

您正试图将相同的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));  
    });
});

函数createRow（positionVal、teamVal、pointsVal）{
变量行=$（''）；
var position=$（''）.html（positionVal）；
var teamname=$（''）.html（teamVal）；
var points=$（''）.html（pointsVal）；
行。追加（位置、团队名称、点数）；
返回行；
}
$.getJSON（“helpers.php”{
})
.done（函数（行）{
$.each（行，函数（）{
//填充表格
$（“#表一”）.append（createRow（this.position，this.team，this.points））；
$（“#表二”）.append（createRow（this.position，this.team，this.points））；
});
});

请参见

您只需更改最后两行：

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

看

您只需更改最后两行：

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

---

谢谢，这个函数的方法很好，但是Jason的回答使用的代码行更少，所以使用了这个选项：-）不用担心！我不知道

.wrap（）

这太棒了！每天都是上学的日子。无论如何，对我来说当然！谢谢，这个函数的方法很好，但是Jason的回答使用的代码行更少，所以使用了这个选项：-）不用担心！我不知道

.wrap（）

这太棒了！每天都是上学的日子。无论如何，对我来说当然！更好-从未了解过克隆（）更好-从未了解过克隆（）