"Using jQuery to add emphasis to a table row and remove it again

Question

"Using jQuery to add emphasis to a table row and remove it again

I have a table with multiple rows, where I have styled each odd row in one shade of gray and the even rows in slightly different shades to make it easier to read.

When clicking on a row, I am currently highlighting it with a different color to indicate which record has been selected. However, I'm not sure how to revert the color back to its original when selecting a different row.

Currently, I find myself having to set all the rows back to their alternate gray colors as a workaround, and then apply the new highlighted color to the selected row.

I was hoping to find a better way to achieve this effect without resorting to such workarounds.

$(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');

});

jquery css

Answer 1

Answer №1

My recommendation is to utilize CSS classes instead of relying on the css() function:

CSS

.highlight { background-color:yellow }

jQuery

When a row is clicked, first remove the highlight class from all rows and then add this class to the clicked row:

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

Answer 2

My recommendation is to utilize CSS classes instead of relying on the css() function:

CSS

.highlight { background-color:yellow }

jQuery

When a row is clicked, first remove the highlight class from all rows and then add this class to the clicked row:

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

Answer 3

Answer №2

Avoid inline styling and utilize classes instead.

Update your CSS file with the following:

.selected {
    background-color: #FFD6F5
}

Update your JavaScript code as follows:

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

Answer 4

Avoid inline styling and utilize classes instead.

Update your CSS file with the following:

.selected {
    background-color: #FFD6F5
}

Update your JavaScript code as follows:

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

Answer 5

Answer №3

Here is a simple solution for your problem:

By toggling CSS classes on rows, you can achieve the desired effect.

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

Answer 6

Here is a simple solution for your problem:

By toggling CSS classes on rows, you can achieve the desired effect.

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

Answer 7

Answer №4

If you want to improve your code, consider working with classes instead of directly setting css attributes:

CSS (order matters; refer to Rory McCrossan's response for different baseline coloring):

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

JavaScript:

$(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 want to allow selection of multiple rows, make sure to move the 'removeClass' method to where you handle deselection.

jsFiddle (live demo)

NB (id attribute)

In your click handler selector, you used the id 'abc' with the tr element. This may not be logical unless you have multiple rows sharing the same id. It's better to use classes for this purpose and you can add multiple classes in a single class attribute. jQuery makes handling this easier even though it can get a little tricky without convenience code.

Answer 8

If you want to improve your code, consider working with classes instead of directly setting css attributes:

CSS (order matters; refer to Rory McCrossan's response for different baseline coloring):

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

JavaScript:

$(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 want to allow selection of multiple rows, make sure to move the 'removeClass' method to where you handle deselection.

jsFiddle (live demo)

NB (id attribute)

In your click handler selector, you used the id 'abc' with the tr element. This may not be logical unless you have multiple rows sharing the same id. It's better to use classes for this purpose and you can add multiple classes in a single class attribute. jQuery makes handling this easier even though it can get a little tricky without convenience code.

"Using jQuery to add emphasis to a table row and remove it again

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Are you experiencing problems with JSON formatting?

Retrieving a targeted data point from a JSON object

How to set up a Carousel as the background within a div using Bootstrap 5

Font that has been downloaded is not showing up on the HTML document

The "Read more" feature is not functional on mobile devices

jquery's each method is not functioning as intended and causing unexpected issues

Customize scaffolding.less for the body element

Stop users from being able to input line breaks by pasting

Troubleshooting issue: Click function not responding inside Bootstrap modal

jQuery is an excellent tool for implementing drag and drop folder upload functionality, all without

Implementing a soft transition to intl-tel-input plugin

Is there a way to access a PHP value within a self-invoked jQuery function?

Error: AJAX requesting page not listed in manifest

Is there a way for me to determine if a user has engaged with a form?

Positioning a div at the bottom of a webpage without using absolute positioning in HTML

What causes certain divs to protrude when the parent div has overflow:hidden property enabled?

How to effectively send data via POST request in ASP.NET to ensure that images are properly displayed on the form

What is the best way to combine two arrays of objects in AngularJS?

Where should you incorporate Jquery within a PHP-heavy webpage?

An issue has been identified with the functionality of an Ajax request within a partial view that is loaded through another Ajax request specifically in