在 table jquery 上追加每个跨度值

Question

我这里有一个 table 每个 td 有多个值。我想将其附加到另一个 table 但这次我想更改 format.My 所需的输出是

Update

Table 是动态填充的 fiddle 只是一个示例

123 John Smith

456 James Lebron

$(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>

在 table jquery 上追加每个跨度值

Append on each span value on table jquery

html

jquery

row