Jquery create new datatable with checked rows-CodePudding

I am showing some data in jquery datatable through Ajax call. I have added checkbox in datatable. Now I want to get data of checked rows and create new datable in popup.

I am getting checked rows data from below code and display in alert. How can I create new datatable from below code?

$("#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);

CodePudding user response：

If for example you have this structure for your new table:

<table  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>

I could do it like this using JQuery:

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

If you want to create a new table:

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

CodePudding user response：

You can create a new table and clone tr

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

  $newTable.insertAfter("#btn");

Please check working example here