"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

Internet Explorer 9 (IE9) causing CSS dropdown menu to be truncated due

Creating a Jquery function to clone a select element with an inline onchange event and handle multiple ajax requests

How can I dismiss a pop-up window for adding a new record in a jQuery jTable after it has been saved in an MVC application

Issue with TinyMCE Editor: Inoperative

The issue with the material design checkbox change functionality not functioning as expected

Disabling the search function when it is clicked (before any actions are taken)

Incorporate the selectpicker feature into a dynamic input field

Tips for refreshing the appearance of a window in angular when it is resized

Determine if a specific date occurred at least one day ago using momentjs

using outlines for FontAwesome icons in React Native

Yii: Error: The method 'typeahead' is not defined for the object [object Object]

The functionality of saving a file using the jsPDF method is not functioning properly

Add a CSS class to a dropdown menu option in HTML and JavaScript (JQuery) if it has a specified ID

How to create a vibrant and colourful full background

Sliding content with the grace of a visual journey

powerful enhancer separates the heading into a layout

Adding classes to a randomly generated <li> element in a unique and one-time fashion

What is the best way to retrieve the JQuery property from within a regular JavaScript function?

Don't forget to preserve the hover state of divs even after refreshing

Locating the jQuery element just one element next to it