Tag: interface do usuário

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?

Visualizar Dados

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.