How To Highlight A Table Row On Click Using JQuery - Codippa

Home » Add Background Color To Tr Jquery » How To Highlight A Table Row On Click Using JQuery - Codippa

Maybe your like

codippa

Press ESC to close

Search

Any element is highlighted due to its background-color property. By default this property has NO value, hence the element is not highlighted when it is at first added to the page. If we change the value of this property, we are easily able to highlight the element. For highlighting an element (such as a table row) on click, there are a couple of approaches using jQuery:

I. Change the ‘background-color’ property of the row in the click event handler of the row. Code would be:

//attach an onclick event handler to the table rows $(“#myTable tbody tr”).click(function(){ //change the ‘background-color’ property to the desired color. $(this).css(‘background-color’,’ yellow’); });

Let’s tweak in:

1. The code alongwith its comments is self-explanatory. 2. Hex code of the color may also be used instead of color name.

II. Add a css class to the application css file which will have the ‘background-property’ property alongwith its value. In the onclick event handler of table row add this class to the clicked table row. Code would be:

//attach an onclick event handler to the table rows $(“#myTable tbody tr”).click(function(){ //add the css class which has the required background color property to the clicked table row $(this).addClass(‘rowColor’); });

The css class would have an entry like this:

.rowColor{ background-color:yellow; }

Let’s tweak in:

1. Code is self-explanatory. 2. Again, in place of color string value, a hex code of the desired color may also be used.

Categorized in:

jQuery,

Tagged in:

highlight row on click, jquery Share Article: Share on Facebook Share on Twitter Share on Email Share on Whatsapp Copy Link

Previous Article

How to fetch items of a list matching some condition in java / How to partition an Object list based on some field value in java

Next Article

How to add a new row to html table on press of a button using jQuery

More in this CategoryjQuery

jQuery View All Articles 1

How to increment the value of an element using jQuery / How to add 1 to an element value using jQuery

2

How to attach autocomplete to a text box with a Map returned from Spring controller using jQuery

3

How to select an element inside a frame using javascript / Various ways to select an element inside a frame using javascript

4

How to select multiple elements in jQuery / How to use single expression to select multiple elements in jQuery

View All Articles

Leave a Reply Cancel reply

Log In

Article Information

Category: jQuery Updated: January 13, 2025 Reading time: 1 Min

Table of Contents

Related Articles

How to increment the value of an element using jQuery / How to add 1 to an element value using jQuery

October 14, 2017

How to attach autocomplete to a text box with a Map returned from Spring controller using jQuery

July 15, 2017

How to select an element inside a frame using javascript / Various ways to select an element inside a frame using javascript

February 2, 2017

How to select multiple elements in jQuery / How to use single expression to select multiple elements in jQuery

December 26, 2016

How to check if an element has a class using jQuery / How to check the presence of a class on an element using jQuery

November 29, 2016

How to refresh a page using jQuery and javascript

November 26, 2016

How to add a new row to html table on press of a button using jQuery

November 11, 2016 Optimized by NitroPack.io

Automated page speed optimizations for fast site performance

Tag » Add Background Color To Tr Jquery