3

Preciso compor/gerar uma nova tabela em html onde os registros da nova serão oriundos de uma seleção de <input type checkbox> em outra tabela na mesma página html exibida numa modal, vide imagem. Assim que o usuário clicar em importar, deverá trazer os registros para a tabela na página ao fundo da modal.

Obs.: Utlizo o Bootstrap, JQuery, C# em ambiente ASP.NET MVC.

inserir a descrição da imagem aqui

2
  • Uma dúvida: a modal atualiza a tabela de trás ou a tabela de trás atualiza a modal? 8/07/2016 às 17:59
  • Sin. A Modal atualiza a tabela principal que é a que existirá assim que clicar em importar. 8/07/2016 às 20:38

1 Resposta 1

3

Se entendi bem você que pegar itens selecionados em uma tabela e copiar para outra, para isso você pode fazer assim:

$('#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>

Você também pode colocar atributos ou value no checkbox, percorrer os selecionados e montar a tabela com os valores do checkbox selecionado. Exemplo:

$('#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>

4
  • Se ele usa Bootstrap, esse não é um bom modo. 8/07/2016 às 19:43
  • 1
    @PauloHDSousa Não entendi, pq não é um bom modo?
    – abfurlan
    8/07/2016 às 19:53
  • Poderia obter somente uma coleção com os ID de cada linha selecionada? Cada registro possui um ID único, atualmente armazeno os ID na propriedade Value de cada Input de cada linha. 8/07/2016 às 21:02
  • @SamuelSilvaSardinha sim é possível veja aqui jsfiddle.net/hdx4emfh
    – abfurlan
    11/07/2016 às 12:31

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .