Mount one HTML table from another’s records with Jquery and C#?

Question

I need to compose/generate a new table in html where the records of the new will come from a selection of <input type checkbox> in another table on the same html page displayed in a modal, see image. Once the user clicks on import, he should bring the records to the table on the page at the bottom of the modal.

Obs.: Utlizo the Bootstrap, Jquery, C# in ASP.NET MVC environment.

Answer 1

If I understand well you that take selected items in one table and copy to another, for this you can do so:

$('#importar').click(function(){
  $("#tb2 tbody").html('');//limpa a tabela 2
      //percorre todos os checkbox marcados na tabela 1
    $('#tb1 tbody tr td input[type=checkbox]:checked').each(function(){
      var $tr = $(this).parents('tr').clone(); // clona a tr
      $tr.find('td:eq(0)').remove(); // remove a primeira coluna
      $("#tb2 tbody").append($tr); // coloca na tabela 2
  })
});

table{width:100%;margin:20px 0}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tb1" border="1">
<thead>
  <tr>
    <th></th>
    <th>Nome</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td><input type="checkbox" name="sel" /></td>
    <td>X</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="sel" /></td>
    <td>Y</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="sel" /></td>
    <td>Z</td>
  </tr>
</tbody>
</table>
<button type="button" id="importar">Importar</button>
<table id="tb2" border="1">
<thead>
  <tr>
    <th>Nome</th>
  </tr>
</thead>
<tbody>
  
</tbody>
</table>

You can also place attributes or value in the checkbox, scroll through the selected ones and mount the table with the values of the selected checkbox. Example:

$('#importar').click(function(){
    $("#tb2 tbody").html('');
    $('#tb1 tbody tr td input[type=checkbox]:checked').each(function(){
      $("#tb2 tbody").append('<tr><td>'+$(this).data('name')+'</td></tr>');
    })
});

table{width:100%;margin:20px 0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tb1" border="1">
<thead>
  <tr>
    <th></th>
    <th>Nome</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td><input type="checkbox" name="sel" data-name="X" value="1" /></td>
    <td>X</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="sel" data-name="Y" value="2" /></td>
    <td>Y</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="sel" data-name="Z" value="3" /></td>
    <td>Z</td>
  </tr>
</tbody>
</table>
<button type="button" id="importar">Importar</button>
<table id="tb2" border="1">
<thead>
  <tr>
    <th>Nome</th>
  </tr>
</thead>
<tbody>
  
</tbody>
</table>