jQuery - добавить строку в две таблицы

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)); 
    }); 
});