Jquery 创建包含选中行的新数据表

Question

我正在通过 Ajax 调用显示 jquery 数据表中的一些数据。我在数据表中添加了复选框。现在我想获取选中行的数据并在弹出窗口中创建新的数据表。

我正在从下面的代码中获取已检查的行数据并以警报方式显示。我如何从下面的代码创建新的数据表？

$("#table_schedule input[type=checkbox]:checked").each(function () {
                var row = $(this).closest("tr")[0];
                message += row.cells[1].innerHTML;
                message += "   " + row.cells[2].innerHTML;
                message += "   " + row.cells[3].innerHTML;
                message += "\n";
 
            //Display selected Row data in Alert Box.
            alert(message);

Answer 1

您可以创建一个新的 table 并克隆 tr

  $newTable = $("<table>")
  $("#table_schedule input[type=checkbox]:checked").each(function() {
    $(this).closest("tr").clone().appendTo($newTable);
  });

  $newTable.insertAfter("#btn");

请检查工作示例here

Answer 2

例如，如果您的新 table 具有此结构：

<div id="content">
    <table class="table table-hover " id="myTable">
         <thead>
             <tr>
                 <th>Field 1</th>
                 <th>Field 2</th>
             </tr>
         </thead>
         <tbody>
             <tr>
                 <td></td> 
                 <td></td>
             </tr>
             <tr>
                 <td></td>
                 <td></td>
             </tr>
         </tbody>
     </table>
</div>

我可以这样使用 JQuery:

$('#myTable tbody').append('<tr><td>row.cells[1].innerHTML</td><td>row.cells[2].innerHTML</td><td>row.cells[3].innerHTML</td></tr>');

如果你想创建一个新的table:

 var table = $('<table id="myTable">').addClass('foo');
                
 table.append( '<tr><td>' + row.cells[1].innerHTML +   '</td><td>' + row.cells[2].innerHTML + '</td><td>' + row.cells[3].innerHTML + '</td></tr>' );    
            
 $('#content').append(table);

Jquery 创建包含选中行的新数据表

Jquery create new datatable with checked rows

datatable

jquery

datatables