附加到表jquery上的每个span值

时间:2015-09-09 10:12:53

标签: jquery html row

FIDDLE

我这里有一张表,每个td都有多个值。我想将此附加到另一个表中,但这次我想更改格式。我想要的输出是

Update

表是动态填充的小提琴只是一个示例

  

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

1 个答案:

答案 0 :(得分: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>