Append каждого значения диапазона на столе JQuery

Question

FIDDLE

У меня есть таблица здесь с несколькими значениями по каждому тд. Я хочу добавить это в другую таблицу, но на этот раз я хочу, чтобы изменить format.My желаемого результата является

Update

Таблица динамически населенной скрипка только образец

123 John Smith

456 Джеймс Леброн

$(document).on('click', '.add', function() { 
var tr; 
var table = $(this).closest('tr').find('td:nth-child(3)'); 
table.each(function() { 
    var sport = $(this).closest('tr').find('td:nth-child(1)').text(); 
    var id = $(this).closest('tr').find('.pid').text(); 
    var fname = $(this).closest('tr').find('.fname').text(); 
    var lname = $(this).closest('tr').find('.lname').text(); 
    console.log(id); 
    console.log(fname); 
    console.log(lname); 
    tr = $('<tr/>'); 
    tr.append("<td>" + sport + "</td>"); 
    tr.append("<td>" + id + "</td>"); 
    tr.append("<td>" + fname + "</td>"); 
    tr.append("<td>" + lname + "</td>"); 
    $("#datato").append(tr); 
}); 

});

Update fiddle

fiddle

Answer 1

$(document).on('click', '.add', function() { 
 
    var tr; 
 
    var table = $(this).closest('tr').find('td').slice(0,2); 
 
    table.each(function (i, val) { 
 
     var sport = $(this).closest('tr').find('td').first().text(); 
 
     var id = $(this).closest('tr').find('.pid').eq(i).text(); 
 
     var fname = $(this).closest('tr').find('.fname').eq(i).text(); 
 
     var lname = $(this).closest('tr').find('.lname').eq(i).text(); 
 
     tr = $('<tr/>'); 
 
     tr.append("<td>" + sport + "</td>"); 
 
     tr.append("<td>" + id + "</td>"); 
 
     tr.append("<td>" + fname + "</td>"); 
 
     tr.append("<td>" + lname + "</td>"); 
 
     $("#datato").append(tr); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<table id='datafrom'> 
 
    <tr> 
 
     <td> 
 
      <span class='pid'>123</span><span class='pid'>456</span> 
 
     </td> 
 
     <td> 
 
      <span class='fname'>John</span><span class='fname'>James</span> 
 
     </td> 
 
     <td> 
 
      <span class='lname'>Smith</span><span class='lname'>Lebron</span> 
 
     </td> 
 
     <td> 
 
      <a href='#' class='add'>Add</a> 
 
     </td> 
 
    </tr> 
 
</table> 
 
<table id='datato'></table>

Answer 2

Вы можете сделать что-то вроде

$(document).on('click', '.add', function() { 
 
    var $tr = $(this).closest('tr'), 
 
    count = $tr.find('.pid').length; 
 

 
    var $trs = $(); 
 
    for (var i = 0; i < count; i++) { 
 
    $trs = $trs.add($('<tr />').append('<td>' + $tr.children().first().text() + '</td>')); 
 
    } 
 

 
    $tr.children().slice(1, -1).each(function(tid) { 
 
    $('span', this).each(function() { 
 
     $('<td />', { 
 
     text: $(this).text() 
 
     }).appendTo($trs.eq(tid)); 
 
    }) 
 
    }); 
 
    $("#datato").append($trs); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table id='datafrom'> 
 
    <tr> 
 
    <td>basketbal</td> 
 
    <td> <span class='pid'>123</span><span class='pid'>456</span></td> 
 
    <td><span class='fname'>John</span><span class='fname'>James</span></td> 
 
    <td><span class='lname'>Smith</span><span class='lname'>Lebron</span></td> 
 
    <td><a href='#' class='add'>Add</a></td> 
 
    </tr> 
 
</table> 
 
<table id='datato'></table>