Visited in tr table

Asked

Viewed 110 times

0

I have a table that when being clicked a tr, a screen is generated on the page itself according to what was selected, I need a css code (if possible), that when being clicked the tr it is with a background different from the others, when another tr is clicked, the same goes with a different background as the tag :active a. In my table each tr has a different id and name.

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>
javascript html css

  • And should this status persist between page sessions or can you just keep it during the session? That is, if the page is updated, what should happen?

  • If the page is updated, all tr should have an equal default background, example all with the white background, was clicked on a tr, that tr should have a blue background, was clicked on another tr, what was previously clicked turns to white and the clicked gets the blue background.

  • Preferably in CSS, but would you accept the answer in jquery anyway? I find it difficult to come up with an answer using only CSS

  • Yes, yes @Bsalvo.

  • So it seems that the friend Leandro solved his problem.

3 answers

1


Would that be what you want to do?

$("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>

What the above code does: When you click on a tr of the table it places all the tr with background-color white and black text, except this (tr clicked) and then applies the background-color blue and text color in red on tr clicked.

  • Exactly! Thank you @Leandro.

  • Leandro but instead of using $("tr"). click(Function() { I want to use an onclick on all tr as it would look?

  • Carlos, the syntax of Jquery is simplistic $("tr"). click(Function() means that it is applying onclick to all tr

  • @Carloshenrique As @Bsalvo mentioned above, with jQuery the syntax becomes simpler, because with the $('tr').click(function() the function in question is being applied to all as tr present on the page, not having to put the attribute onclick in each tr individually.

  • Okay, if I want to also change the color of the text, as I would?

  • @Carloshenrique I edited the post putting the script to change the background color and the color of the text, now just edit the code by inserting the desired colors.

Show 1 more comment

0

Unfortunately there is no way to do this only with css, because the TR tag is not a naturally selectable element. However, you can use Javascript to add a specific class on the last selected TR, and manipulate its style through this. Following example:

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");
    }
}

Or, if you use jQuery in your application:

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

NOTE: Remembering that style manipulation, for organizational reasons, should always be done from a class, and not directly in js.

0

Every time you click on the element tr function will add class clique that exists in CSS, ie blue background and white letters

$(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>

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.