1

Estou populando uma tabela com dados vindo do banco de dados, os ids são dinamicos usando o id do banco de dados, preciso recuperar estes ids com javascript, segue o código como exemplo.

function selecionaDactes(){
   var ids = document.getElementsByClassName('editar');         
   gravaArray(ids);         
}  
        
function gravaArray(dados){
   var array_dados = Array;
   array_dados = dados;
   for(var x = 0; x <= array_dados.length; x++){
       if(array_dados[x].checked){
            alert(array_dados[x].value);
       }else{                
            alert('não há dados selecionados' + array_dados[x].value);
        }
    }
}
<table border="1">
  <tr>
    <td><input class="editar" type="checkbox" id="187" value="187"></td>
    <td>Vasco</td>
    <td><button type="button" onclick="selecionaDactes()">Editar</button></td>
  </tr>
  <tr>
    <td><input type="checkbox" id="90" value="90"></td>
    <td>Flamengo</td>
    <td><button type="button" onclick="selecionaDactes()">Editar</button></td>
  </tr>
  <tr>
    <td><input class="editar" type="checkbox" id="341" value="341"></td>
    <td>Corinthians</td>
    <td><button type="button" onclick="selecionaDactes()">Editar</button></td>
  </tr>
  <tr>
    <td><input class="editar" type="checkbox" id="701" value="701"></td>
    <td>Santos</td>
    <td><button type="button" onclick="selecionaDactes()">Editar</button></td>
  </tr>
  <tr>
    <td><input class="editar" type="checkbox" id="33" value="33"></td>
    <td>Londrina</td>
    <td><button type="button" onclick="selecionaDactes()">Editar</button></td>
  </tr>
</table>

sou novado em javascript e não estou encontrando a solução já li a documentação neste Link, mas não encontrei a solução

3 Respostas 3

4

Podes usar o seletor :checked que te dá todas as checkboxes selecionadas.

O código podia ficar assim:

function selecionaDactes() {
  var selecionadas = document.querySelectorAll('table :checked');
  var ids = [].map.call(selecionadas, function(el) {
    return el.id;
  });
  gravaArray(ids);
}

function gravaArray(dados) {
  alert(dados);
}
<table border="1">
  <tr>
    <td><input class="editar" type="checkbox" id="187" value="187"></td>
    <td>Vasco</td>
    <td><button type="button" onclick="selecionaDactes()">Editar</button></td>
  </tr>
  <tr>
    <td><input type="checkbox" id="90" value="90"></td>
    <td>Flamengo</td>
    <td><button type="button" onclick="selecionaDactes()">Editar</button></td>
  </tr>
  <tr>
    <td><input class="editar" type="checkbox" id="341" value="341"></td>
    <td>Corinthians</td>
    <td><button type="button" onclick="selecionaDactes()">Editar</button></td>
  </tr>
  <tr>
    <td><input class="editar" type="checkbox" id="701" value="701"></td>
    <td>Santos</td>
    <td><button type="button" onclick="selecionaDactes()">Editar</button></td>
  </tr>
  <tr>
    <td><input class="editar" type="checkbox" id="33" value="33"></td>
    <td>Londrina</td>
    <td><button type="button" onclick="selecionaDactes()">Editar</button></td>
  </tr>
</table>

5
  • 1
    muito obrigado, era exatamente minha dúvida.
    – WMomesso
    4/05/2017 às 11:38
  • Agora estou com outro problema independente da quantidade de dados selecionados sempre carrega duas virgulas antes dos dados, exemplo se selecionar dois itens fica assim ",,33,67", o que pode ser?
    – WMomesso
    4/05/2017 às 13:39
  • 1
    @WagnerFernandoMomesso dá-me ideia que não estás a usar o seletor que indiquei: 'table :checked. Mas se quiseres coloca aqui um jsFiddle que posso dar uma olhada.
    – Sergio
    4/05/2017 às 14:01
  • fiz o que me pediste jsfiddle.net/3mv1weL5, e fiz conforme tua indicação mesmo assim acontece, a minha table esta contida em um while e vem em código php já verifiquei toda a estrutura php e está tudo correto, se vc falar que o jsFiddle estiver vou reescrever meu código, obrigado.
    – WMomesso
    4/05/2017 às 20:08
  • @WagnerFernandoMomesso jsfiddle.net/5s9nwg8w <- funciona bem.
    – Sergio
    4/05/2017 às 20:46
2

Você pode fazer dessa forma.

function selecionaDactes(){
   var ids = document.getElementsByClassName('editar');
   gravaArray(ids);         
}  
        
function gravaArray(dados){
   var array_dados = dados; 
  
   for(var x = 0; x <= array_dados.length; x++){     
        if(typeof array_dados[x] == 'object'){
          if(array_dados[x].checked){
            alert("O ID " + array_dados[x].id +" está marcado")           
          }
        }      
   }
}
<table border="1">
  <tr>
    <td><input class="editar" type="checkbox" id="187" value="187"></td>
    <td>Vasco</td>
    <td><button type="button" onclick="selecionaDactes()">Editar</button></td>
  </tr>
  <tr>
    <td><input type="checkbox" class="editar" id="90" value="90"></td>
    <td>Flamengo</td>
    <td><button type="button" onclick="selecionaDactes()">Editar</button></td>
  </tr>
  <tr>
    <td><input class="editar" type="checkbox" id="341" value="341"></td>
    <td>Corinthians</td>
    <td><button type="button" onclick="selecionaDactes()">Editar</button></td>
  </tr>
  <tr>
    <td><input class="editar" type="checkbox" id="701" value="701"></td>
    <td>Santos</td>
    <td><button type="button" onclick="selecionaDactes()">Editar</button></td>
  </tr>
  <tr>
    <td><input class="editar" type="checkbox" id="33" value="33"></td>
    <td>Londrina</td>
    <td><button type="button" onclick="selecionaDactes()">Editar</button></td>
  </tr>
</table>

1
  • obrigado, percebi que havia algumas falhas no meu código e com a ajuda da comunidade consegui solucionar.
    – WMomesso
    4/05/2017 às 11:45
2

Wagner, pelo que observei seu código já esta pegando o ID do elemento através do método getElementsByClassName(), só tem alguns problemas que podem estar te confundindo. O segundo elemento <input type="checkbox" id="90" value="90"> está sem a classe editar(class="editar"), ou seja, através do seu código você não vai conseguir o ID dele. O segundo problema é que o seu for ia até array_dados.length, no seu caso você deve ir até array_dados.length-1 ou simplesmente trocar para x < array_dados.length para não estourar um erro. Segue um código que contém essas alterações.

function selecionaDactes() {
  var ids = document.getElementsByClassName('editar');
  gravaArray(ids);
}

function gravaArray(dados) {
  var array_dados = Array;
  array_dados = dados;
  for (var x = 0; x < array_dados.length; x++) {
    if (array_dados[x].checked) {
      alert(array_dados[x].value);
    } else {
      alert('não há dados selecionados' + array_dados[x].value);
    }
  }
}
<table border="1">
  <tr>
    <td><input class="editar" type="checkbox" id="187" value="187"></td>
    <td>Vasco</td>
    <td><button type="button" onclick="selecionaDactes()">Editar</button></td>
  </tr>
  <tr>
    <td><input class="editar" type="checkbox" id="90" value="90"></td>
    <td>Flamengo</td>
    <td><button type="button" onclick="selecionaDactes()">Editar</button></td>
  </tr>
  <tr>
    <td><input class="editar" type="checkbox" id="341" value="341"></td>
    <td>Corinthians</td>
    <td><button type="button" onclick="selecionaDactes()">Editar</button></td>
  </tr>
  <tr>
    <td><input class="editar" type="checkbox" id="701" value="701"></td>
    <td>Santos</td>
    <td><button type="button" onclick="selecionaDactes()">Editar</button></td>
  </tr>
  <tr>
    <td><input class="editar" type="checkbox" id="33" value="33"></td>
    <td>Londrina</td>
    <td><button type="button" onclick="selecionaDactes()">Editar</button></td>
  </tr>
</table>

1
  • gostei das observações e estou entendendo os problemas apontado, muito obrigado.
    – WMomesso
    4/05/2017 às 11:43

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 .