javascript - 从现有表生成动态表的问题

Question

您能看一下This Demo Fiddle吗？并让我知道如何通过复选框将选定行中的值从表附加到新的动态表？

到目前为止我已经尝试过了

var td1 = [];
$('#btn').on('click', function () {
    var checkedRows = [];
    $(':checkbox:checked').closest('tr').each(function () {
        checkedRows.push(
        $(this).find('td:gt(0)').map(function () {
            return $(this).html();
        }).get());
    });

    for (var i = 0; i < checkedRows.length; i++) {
        td1.push(parseInt(checkedRows[i][1]));
        td1.push(parseInt(checkedRows[i][5]));
        td1.push(parseInt(checkedRows[i][3]));
        td1.push(parseInt(checkedRows[i][4]));
    }
    $('pre.out').text(JSON.stringify(td1));
    for (var i = 0; i < checkedRows.length; i++) {
        //  $('#newTable').append('<tr>');

    }
});

但是我在处理从二维数组checkedRows加载时迷失了方向，所以我尝试首先将每一行加载到td1但仍然很困惑!

请注意，我并不是要在新表中包含所有单元格值，它必须仅包含来自相同听到的值。这是 HTML

<table border="1" width="100%">
    <thead>
        <tr>
            <td></td>
            <td>Model 1</td>
            <td>Shop 2</td>
            <td>Shop 3</td>
            <td>Shop 4</td>
            <td>Shop 5</td>
            <td>Shop 6</td>
            <td>Shop 7</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type='checkbox' /></td>
            <td>Model 1</td>
            <td>20000</td>
            <td>50000</td>
            <td>20000</td>
            <td>88000</td>
            <td>44000</td>
            <td>30000</td>
        </tr>
        <tr>
            <td><input type='checkbox' /></td>
            <td>Model 2</td>
            <td>20000</td>
            <td>50000</td>
            <td>20000</td>
            <td>88000</td>
            <td>44000</td>
            <td>30000</td>
        </tr>
    </tbody>
</table>
<br />
<input id="btn" type="button" label="button" value="get rows" />

<pre class="out"></pre>


<table border="1" width="100%">
    <thead>
        <tr>
            <td>Shop 2</td>
            <td>Shop 6</td>
            <td>Shop 4</td>
            <td>Shop 5</td>
        </tr>
    </thead>
    <tbody id="newTable">
    </tbody>
</table>

谢谢

Answer 1

您已经完成了更困难的部分，现在数组中所有已检查的行数据都已存在，您可以使用append()并为其创建tr/td代码:

for (var i = 0; i < checkedRows.length; i++) {
    $('#newTable').append('<tr>' + 
                          '<td>' + checkedRows[i][1] + '</td>' + 
                          '<td>' + checkedRows[i][5] + '</td>' + 
                          '<td>' + checkedRows[i][3] + '</td>' +  
                          '<td>' + checkedRows[i][4] + '</td>' + 
                          '</tr>');
}

Fiddle .

奖励:如果您想避免重复，只需更改此行:

$(':checkbox:checked').closest('tr').not(".copied").each(function() {
    $(this).addClass("copied");

Fiddle 。然后您可以禁用复选框或任何您想要向用户显示他无法再复制该行的内容。