Mounting an HTML table from another records with JQuery and C #?

Question

Mounting an HTML table from another records with JQuery and C #?

Navigation

#1 by (3 votes)

3

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

Note: I use Bootstrap , JQuery , C # in ASP.NET MVC environment.

html jquery c# asp.net-mvc table

asked by anonymous 08.07.2016 / 19:48

1 answer

Doubt regarding good practices with virtual properties How to configure charset = utf-8 in Mysql?

score 3 · Answer 1

If you understand that you get selected items in one table and copy to another, for this you can do this:

$('#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><tableid="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 put attributes or value in the checkbox, scroll through the selected ones, and mount the table with the values of the checkbox you selected. 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><tableid="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>