Highlight HTML Table Rows with JavaScript

Highlight Table Rows on Mouseover

To highlight whole rows, use the following function:

function hiLiteRows(){
 var table = document.getElementById('myTable2');
 for (var i=0;i < table.rows.length;i++)
 {
  table.rows[i].onmouseover = function () {
   this.origColor=this.style.backgroundColor;
   this.style.backgroundColor='#BCD4EC';
  }
  table.rows[i].onmouseout = function () {this.style.backgroundColor=this.origColor;}
 }
}

We use a rows array to get access to table rows. The basic principle is as follows: the original background color is saved in a custom property of a row object to be restored on the mouseout event. The this keyword here refers to the row object.

-->

Highlight TableRows on Click Event

To highlight table rows on the click event, we modify the previous function:

function hiLiteRowsClick(){
 var table = document.getElementById('myTable3');
 for (var i=0;i < table.rows.length;i++){
  table.rows[i].onclick= function () {
   if(!this.hilite){
    this.origColor=this.style.backgroundColor;
    this.style.backgroundColor='#BCD4EC';
    this.hilite = true;
   }
   else{
    this.style.backgroundColor=this.origColor;
    this.hilite = false;
   }
    }
 }
}

Instead of the mouseover event, we use the onclick event to call the anonymous function.
The function will change the background color when a row is clicked for the first time. When a row is clicked again, the original color is restored. To keep track of the click sequence the function uses a custom property called hilite.
This property is set to true on the first click and set to false on the second one.

Related posts:

Hide columns in a table

Expand/collapse rows dynamically

A Simple Way to Highlight Table Cells with JavaScript

Highlight Table Rows on Mouseover

To highlight whole rows, use the following function:

function hiLiteRows(){
 var table = document.getElementById('myTable2');
 for (var i=0;i < table.rows.length;i++)
 {
  table.rows[i].onmouseover = function () {
   this.origColor=this.style.backgroundColor;
   this.style.backgroundColor='#BCD4EC';
  }
  table.rows[i].onmouseout = function () {this.style.backgroundColor=this.origColor;}
 }
}

We use a rows array to get access to table rows. The basic principle is as follows: the original background color is saved in a custom property of a row object to be restored on the mouseout event. The this keyword here refers to the row object.

Highlight TableRows on Click Event

To highlight table rows on the click event, we modify the previous function:

function hiLiteRowsClick(){
 var table = document.getElementById('myTable3');
 for (var i=0;i < table.rows.length;i++){
  table.rows[i].onclick= function () {
   if(!this.hilite){
    this.origColor=this.style.backgroundColor;
    this.style.backgroundColor='#BCD4EC';
    this.hilite = true;
   }
   else{
    this.style.backgroundColor=this.origColor;
    this.hilite = false;
   }
    }
 }
}

Instead of the mouseover event, we use the onclick event to call the anonymous function.
The function will change the background color when a row is clicked for the first time. When a row is clicked again, the original color is restored. To keep track of the click sequence the function uses a custom property called hilite.
This property is set to true on the first click and set to false on the second one.