Uma dúvida foi postada no grupo de Design e Programação de nossa página, lá no Facebook, hoje. Essa pergunta era referente a como selecionar de uma linha de uma tabela HTML?
Para tal, basta usar um pouco de Javascript e CSS.
Montando a Tabela
Vamos montar, para testar, uma tabela simples, respeitando a semântica HTML básica. Vamos aproveitar para colocar logo um botão, que vai ser por onde podemos visualizar os dados da linha selecionada:
<table id='minhaTabela'> <thead> <tr> <th>ID</th> <th>Nome</th> <th>Idade</th> <tr> </thead> <tbody> <tr> <td>01</td> <td>Rodrigo</td> <td>33</td> </tr> <tr> <td>02</td> <td>Taynara</td> <td>21</td> </tr> <tr> <td>03</td> <td>Raveny</td> <td>22</td> </tr> <tr> <td>04</td> <td>Sérgio</td> <td>51</td> </tr> <tr> <td>05</td> <td>Alice</td> <td>20</td> </tr> </tbody> </table> <button id="visualizarDados">Visualizar Dados</button>
Agora precisamos incluir um estilo para que a tabela fique mais elegante.
É importantíssimo prestar atenção ao class “selecionado” que vai ser a referência para o seu javascript saber qual linha está selecionada na tabela.
#minhaTabela{ width:80%; margin:0 auto; border:0; box-shadow: 0 5px 30px darkgrey; border-spacing: 0; } #minhaTabela thead th{ font-weight: bold; background-color: black; color:white; padding:5px 10px; } #minhaTabela tr td{ padding:5px 10px; text-align: center; cursor: pointer; /**importante para não mostrar cursor de texto**/ } #minhaTabela tr td:last-child{ text-align: right; } /**Cores**/ #minhaTabela tr:nth-child(odd){ background-color: #eee; } /**Cor quando passar por cima**/ #minhaTabela tr:hover td{ background-color: #feffb7; } /**Cor quando selecionado**/ #minhaTabela tr.selecionado td{ background-color: #aff7ff; } button#visualizarDados{ background-color: white; border: 1px solid black; width:50%; margin: 10px auto; padding:10px 0; display: block; color: black; }
Javascript
Para sermos mais justos, vamos fazer o exemplo usando Javascript puro. No nosso exemplo, vamos contemplar a opção de selecionar uma única linha ou mais de uma linha, opção determinada apenas por um parâmetro. Ainda vamos ver como manipular os dados.
Inicialmente, precisamos capturar a tabela e adicionar, à ação de clique, uma função que adicione ou remova a classe de seleção:
var tabela = document.getElementById("minhaTabela"); var linhas = tabela.getElementsByTagName("tr"); for(var i = 0; i < linhas.length; i++){ var linha = linhas[i]; linha.addEventListener("click", function(){ //Adicionar ao atual selLinha(this, false); //Selecione apenas um //selLinha(this, true); //Selecione quantos quiser }); }
A função selLinha() vai ser responsável por adicionar ou remover a class “selecionado” do nó. Passamos também um parâmetro que vai determinar se poderá selecionar mais que uma linha ou apenas uma. O primeiro laço, caso múltiplos seja falso, irá apenas desmarcar todos as linhas antes de marcar a linha clicada.
/** Caso passe true, você pode selecionar multiplas linhas. Caso passe false, você só pode selecionar uma linha por vez. **/ function selLinha(linha, multiplos){ if(!multiplos){ var linhas = linha.parentElement.getElementsByTagName("tr"); for(var i = 0; i < linhas.length; i++){ var linha_ = linhas[i]; linha_.classList.remove("selecionado"); } } linha.classList.toggle("selecionado"); }
Agora vamos adicionar uma função ao clique do botão para que a gente possa visualizar os dados selecionados. Para isso, iremos justamente capturar apenas as linhas que tiverem a class “selecionado” e, através de um laço, vamos concatenar os valores dentro dos nós <td> da(s) linha(s) selecionada(s).
/** Exemplo de como capturar os dados **/ var btnVisualizar = document.getElementById("visualizarDados"); btnVisualizar.addEventListener("click", function(){ var selecionados = tabela.getElementsByClassName("selecionado"); //Verificar se eestá selecionado if(selecionados.length < 1){ alert("Selecione pelo menos uma linha"); return false; } var dados = ""; for(var i = 0; i < selecionados.length; i++){ var selecionado = selecionados[i]; selecionado = selecionado.getElementsByTagName("td"); dados += "ID: " + selecionado[0].innerHTML + " - Nome: " + selecionado[1].innerHTML + " - Idade: " + selecionado[2].innerHTML + "\n"; } alert(dados); });
Vamos Testar?
ID | Nome | Idade |
---|---|---|
01 | Rodrigo | 33 |
02 | Taynara | 21 |
03 | Raveny | 22 |
04 | Sérgio | 51 |
05 | Alice | 20 |
No entanto, se você preferir ver todo código completo, acesse o JsFiddle incorporado abaixo:
Gostou do post curtinho? Tem dúvidas? Deixe seu comentário e compartilhe com quem você achar que vai gostar. Aproveite para entrar no nosso grupo de Design e Programação no Facebook ou em nossa página. Acompanhe-nos no Twitter e Instagram.