CODEWITHSUNDEEP
jquerycss
user4367185
user4367185

Reputation:

jquery highlight and unhighlight table row

I have a table with multipul rows, i have each odd row set one shade of grade and the even a slight different shade so each row is easier to read.

Upon click event i am highlighting that row with a different colour so you know which record has been selected, however when clicking a different row I'm unsure how to delect/revert the colour back to its original.

Instead I'm what I'm having todo is cheat?! and set all the rows back to the alternate grey colours, and then apply the new highlighted colour to the selected row.

I was wondering if there is a better way to do this.

$(document).on("click","#div2 tr#abc", function(event) {

    barcode = $(this).data('barcode');

    $('tr:odd[id="abc"]').css('backgroundColor', '#FAFAFA');
    $('tr:even[id="abc"]').css('backgroundColor', '#F2F2F2');

    $(this).css('backgroundColor','#FFD6F5');

});

Upvotes: 0

Views: 3212

Answers (4)

collapsar
collapsar

Reputation: 17238

One method would be to work with classes instead of setting the css attributes directly:

css (order of clauses significant; see Rory McCrossan's answer how to handle the baseline coloring differently):

.color-even { background-color: #F2F2F2; }
.color-odd  { background-color: #FAFAFA; }
.color-hilite { background-color: #FFD6F5; }

js:

$(document).ready( function() {
    //...
    $('tr:even').addClass('color-even');
    $('tr:odd').addClass('color-odd');
    //...
});

//...

$(document).on("click","#div2 tr", function(event) {
    barcode = $(this).data('barcode');

    $('.color-hilite').removeClass('color-hilite');
    $(this).addClass('color-hilite');
});

If you allow for selection of multiple rows, move the 'removeClass' method to the place in your code where you handle the deselection of individual or all rows.

jsFiddle (live demo)

NB (id attribute)

In the selector of your click handler you qualified the tr element with the id of 'abc'. Given your question, this doesn't make sense as you would have singled out one particular row to attach your handler to. Perhaps you have been reusing the same id value on different rows? That violates the purpose of ids, use classes instead. You may pile up as many classes as you wish in a single class attribute (separated by whitespace; handling that without convenience code becomes slightly cumbersome but you use jquery anyway).

Upvotes: 0

Puneet
Puneet

Reputation: 2051

Try this,

a simple toggle of css classes on rows will do your work.

$(document).on("click","tr", function(event) {

  $('tr').removeClass('active');  
  $(this).addClass('active');

});
tr:nth-child(even) {background: #F2F2F2}
tr:nth-child(odd) {background: #FAFAFA}


td{ width:200px; height:20px;border:1px solid black;}


tr.active{background:#FFD6F5};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      </td>
    <td>
      </td>
    
    </tr>
  <tr>
    <td>
      </td>
    <td>
      </td>
    
    </tr>
  <tr>
    <td>
      </td>
    <td>
      </td>
    
    </tr>
  <tr>
    <td>
      </td>
    <td>
      </td>
    
    </tr>
  <tr>
    <td>
      </td>
    <td>
      </td>
    
    </tr>
  <tr>
    <td>
      </td>
    <td>
      </td>
    
    </tr>
    </table>

Upvotes: 0

Christian
Christian

Reputation: 19740

Don't set styles when you can use classes.

In your CSS:

.selected {
    background-color: #FFD6F5
}

In your JS:

$(document).on("click","#div2 tr", function(event) {
    $('tr').removeClass('selected');
    $(this).addClass('selected');
});

Upvotes: 1

kapantzak
kapantzak

Reputation: 11750

I suggest you work with css classes instead of using css() function:

CSS

.highlight { background-color:yellow }

jQuery

On row click, remove the highlight class from all rows, then add this class to the clicked row:

$('#yourTable tr').on('click', function() {
   $('#yourTable tr').removeClass('highlight');
   $(this).addClass('highlight');
});

Upvotes: 2

Related Questions