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.
