0

Possuo uma tabela que ao ser clicado um tr, é gerado uma tela na própria página de acordo com o que foi selecionado, preciso de um código css(se possível), que ao ser clicado o tr ele fique com um background diferente dos demais, quando outro tr for clicado, o mesmo fique com um background diferente como o :active da tag a. Na minha tabela cada tr tem uma id e name diferente.

Tabela:

        <tr id='ana' name='ana'>
            <td>1</td>
            <td>Ana</td>
            <td>Informática</td>
        </tr> 
         <tr id='bia' name='bia'>
            <td>2</td>
            <td>Bia</td>
            <td>Logística</td>
        </tr>
         <tr id='carlos' name='carlos'>
            <td>3</td>
            <td>Carlos</td>
            <td>Redes</td>
        </tr>
5
  • E este estado deve persistir entre sessões da página ou pode só mantê-lo durante a sessão? Isto é, se a página for atualizada, o que deve acontecer?
    – Woss
    Commented 26/07/2017 às 19:20
  • Se a página for atualizada, todos os tr deverão está com um background igual padrão, exemplo todos com o background branco, foi clicado em um tr, aquele tr deve ficar com um background azul, foi clicado em outro tr, o que foi clicado anteriormente volta a ser branco e o clicado fica com o background azul. Commented 26/07/2017 às 19:24
  • Preferencialmente em CSS, mas aceitaria a resposta em jquery mesmo assim? Acho difícil surgir uma resposta usando apenas CSS
    – Bsalvo
    Commented 26/07/2017 às 19:34
  • Sim, sim @Bsalvo. Commented 26/07/2017 às 19:43
  • Então parece que o amigo Leandro resolveu seu problema.
    – Bsalvo
    Commented 26/07/2017 às 19:47

3 Respostas 3

1

Seria isso que você quer deseja fazer?

$("tr").click(function() {
  $('tr').not(this).css({"background-color": "white", "color": "black"});
  $(this).css({"background-color": "#6495ED", "color": "red"});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr id='ana' name='ana'>
  <td>1</td>
  <td>Ana</td>
  <td>Informática</td>
</tr> 
<tr id='bia' name='bia'>
  <td>2</td>
  <td>Bia</td>
  <td>Logística</td>
</tr>
<tr id='carlos' name='carlos'>
  <td>3</td>
  <td>Carlos</td>
  <td>Redes</td>
</tr>
</table>

O que o código acima faz: Ao clicar em uma tr da tabela ele coloca todos os tr com background-color branco e cor do texto preta, exceto o this (tr clicada) e, em seguida, aplica o background-color azul e cor do texto em vermelho na tr clicada.

6
  • Exato! Obrigado @Leandro. Commented 26/07/2017 às 19:46
  • Leandro mas ao invés de usar $("tr").click(function() { eu queira usar um onclick em todos os tr como ficaria? Commented 26/07/2017 às 19:48
  • Carlos, a sintaxe do Jquery é simplista $("tr").click(function() quer dizer que ele está aplicando o onclick em todos os tr
    – Bsalvo
    Commented 26/07/2017 às 19:51
  • @CarlosHenrique Como o @Bsalvo mencionou acima, com o jQuery a sintaxe fica mais simples, pois com o $('tr').click(function() a função em questão estará sendo aplicada a todas as tr presentes na página, dispensando o trabalho de ter que colocar o atributo onclick em cada tr individualmente.
    – Leandro
    Commented 26/07/2017 às 19:54
  • Okay, se eu quiser também mudar a cor do texto, como faria? Commented 26/07/2017 às 20:01
0

Infelizmente não há uma forma de fazer isso somente com css, por conta da tag TR não ser um elemento naturalmente selecionável. Porém, você pode utilizar Javascript para adicionar uma classe especifica no ultimo TR selecionado, e manipular seu estilo através disso. Segue exemplo:

CSS:

tr {
    background-color: transparent;
}

tr.selected {
    background-color: #DDD;
}

Javascript:

var el = document.getElementsByTagName("tr");
for(i = 0; i < el.length; i++){
    el[i].onclick = function(){
        var trSelected = document.getElementsByClassName("selected");
        if(trSelected.length > 0)
            trSelected[0].classList.remove("selected");
        this.classList.add("selected");
    }
}

Ou, caso use jQuery na sua aplicação:

$("tr").click(function(){
    $("tr.selected").removeClass("selected");
    $(this).addClass("selected");
});

OBS: Lembrando que a manipulação de estilo, por questões de organização, devem sempre ser feitas a partir de uma classe, e não diretamente no js.

0

Toda vez que clicar sobre o elemento tr a função vai adicionar a classe clique que existe no CSS, ou seja, fundo azul e letras brancas

$(function(){
  $('tr').click(function(){
    $(this).addClass('clique');
    $('tr').not(this).removeClass('clique');
  })
});
.clique {
background: #03c;
//para que as letras não fiquem obscuras
color:white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr id='ana' name='ana'>
  <td>1</td>
  <td>Ana</td>
  <td>Informática</td>
</tr> 
<tr id='bia' name='bia'>
  <td>2</td>
  <td>Bia</td>
  <td>Logística</td>
</tr>
<tr id='carlos' name='carlos'>
  <td>3</td>
  <td>Carlos</td>
  <td>Redes</td>
</tr>
</table>

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 .