0

Estou tentando pega o ID da linha selecionada com :checked porém não estou conseguindo.

HTML

<table id="dividas">
    <thead class="thead-inverse">
        <tr>
             <th>#</th>
            <th>ID</th>
            <th>Nome</th>
            <th>Fone</th>
        </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox"></td>
                <td>01</td>
                <td>Pedro</td>
                <td>+55 82 866 869 869</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>02</td>
                <td>Carlos</td>
                <td>+55 82 866 869 869</td>
            </tr>

        </tbody>
</table> 

SCRIPT

$('#save').click(function () {
            $('#dividas').find('input[type="checkbox"]:checked').each(function () {

                //retornar valor de uma coluna
          });

       });

2 Respostas 2

1

Você pode fazer algo assim:

const $inputs = $('#table-data td input');
const $button = $('#save');

$button.on('click', () => {
  const ids = [];
  
  $inputs.each(function() {
    const $input = $(this);
    
    // Adicione o ID à lista caso o input estiver marcado:
    if ($input.prop('checked')) {
      const id = $input.parent().next().text();
      ids.push(id);
    }
  });
  
  // Faça o que quiser com os IDs.
  console.log(ids);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table
  id="table-data"
  class="table table-striped table-inverse table-responsive"
>
  <thead class="thead-inverse">
    <tr>
      <th>#</th>
      <th>ID</th>
      <th>Nome</th>
      <th>Fone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" /></td>
      <td>01</td>
      <td>Pedro</td>
      <td>+55 82 866 869 869</td>
    </tr>
    <tr>
      <td><input type="checkbox" /></td>
      <td>02</td>
      <td>Carlos</td>
      <td>+55 82 866 869 869</td>
    </tr>
  </tbody>
</table>

<button id="save">Salvar</button>


É bom ressaltar que com o JavaScript moderno, podemos fazer muitas coisas (tudo, na verdade) com mais facilidade que o jQuery.

Veja como o código acima ficaria com um paradigma um pouco mais declarativo e sem usar jQuery:

const inputs = document.querySelectorAll('#table-data td input');
const button = document.querySelector('#save');

button.addEventListener('click', () => {
  const ids = [...inputs]
    .filter((input) => input.checked)
    .map((input) => input.parentElement.nextElementSibling.textContent);

  console.log(ids);
});
<table id="table-data">
  <thead>
    <tr>
      <th>#</th>
      <th>ID</th>
      <th>Nome</th>
      <th>Fone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" /></td>
      <td>01</td>
      <td>Pedro</td>
      <td>+55 82 866 869 869</td>
    </tr>
    <tr>
      <td><input type="checkbox" /></td>
      <td>02</td>
      <td>Carlos</td>
      <td>+55 82 866 869 869</td>
    </tr>
  </tbody>
</table>

<button id="save">Salvar</button>

4
  • Muito bom esse código, mas a ideia é pegar todos os IDs das linhas selecionadas para eu mandar para uma REQUEST e executar uma QUERY. 1/10/2019 às 0:08
  • Ah, beleza! Entendi errado a pergunta, perdão... :v Vou editar a resposta... 1/10/2019 às 0:09
  • Luiz, o seu código sumiu. Fiz um teste com um código postado e deu certo aqui, mas não está mais postado. 1/10/2019 às 0:20
  • Isso, mesmo. Muito obrigado 1/10/2019 às 0:27
1

Tente este código:

let inputsCheck = [];

$("button").click(function() {

  inputsCheck = [];

  $("input[type='checkbox']").each(function(ev, elemt) {
  
 if (elemt.checked) {
  //Se quiser pegar somente o ID e jogar no inputsCheck array, então
  //faça assim: elemt.id no lugar de elemt, abaixo:
  inputsCheck.push(elemt);
  
   }
 });

  //Elementos marcados
  console.log(inputsCheck);
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <table id="dividas">
        <thead class="thead-inverse">
            <tr>
                 <th>#</th>
                <th>ID</th>
                <th>Nome</th>
                <th>Fone</th>
            </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox" id="id_1"></td>
                    <td>01</td>
                    <td>Pedro</td>
                    <td>+55 82 866 869 869</td>
                </tr>
                <tr>
                    <td><input type="checkbox" id="id_2"></td>
                    <td>02</td>
                    <td>Carlos</td>
                    <td>+55 82 866 869 869</td>
                </tr>

            </tbody>
    </table>
    <button>Salvar</button>

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 .