Hover Table Row with Javascript

Back to home page | View Javascript file | Comment on this code

This page uses a few easy javascript functions to assist in user-friendly and aesthetically-pleasing "row-selecting." You can now select an "option" from a table and this code provides a CSS-based visual color-change for that row (via a change of class).

This effect is accomplished via the onMouseOver for the HOVER effect and an onClick event for the "selecting" effect when you click/select the row of the table. The radio box will select to correspond with your choice.

See the below example and subsequent code.


Name Webpage Select
Dempsey http://www.seandempsey.com
Piergross http://www.downwiththeloads.com
Rigby Flying Heads

I am using the following style classes to implement this effect:

<style>
TR.class_hover{
    text-align: center;
    font-size: 12px;
    font-weight:bold;
    vertical-align: middle;
    background-color: #B1CFF5;
    cursor: pointer; /* hand-shaped cursor */
    cursor: hand; /* for IE 5.x */

}
TR.class_no_hover{
    font-size: 12px;
    font-weight:bold;
    vertical-align: middle;
    /* background-color: #D0E4F8; */
    text-align: center;
}
</style>

Then you simply give an id to each table-row element (TR) and use the following event-handlers to cause the desired effect.

<tr id='tr_1' onClick='selectRadio(1);'
    onMouseOver="hover(this);"
    onMouseOut="unHover(this, 1);"

Below are the javascript functions allowing this functionality for the row.

<script>

var tr_selected = '';

function selectRadio(row_num){
  unSelectAll();
  if (document.Form.row_radio.length != undefined){
    document.Form.row_radio[row_num - 1].checked = true;
  }
  else{
    document.Form.row_radio.checked = true;
  }

  if (tr_selected != '')
    document.getElementById('tr_' + tr_selected).className = 'class_no_hover';

  document.getElementById('tr_' + row_num).className = 'class_hover';
  tr_selected = row_num;
}

function unSelectAll(){
  if (document.Form.row_radio.length != undefined){
    for (var i=0; i < document.Form.row_radio.length; i++){
      document.Form.row_radio[i].checked = false;
    }
  }
}

function hover(obj){
    obj.className='class_hover';
}

function unHover(obj, row_num){
    if (tr_selected != row_num) obj.className = 'class_no_hover';
}


</script>

Back to home page | View Javascript file | Download the full example



Your Rating      Overall Rating   

Comment on this Code

Your Name
Comment

Recent Comments

"Let me know if you find this functionality helpful or just superflous..." - Posted by Sean Dempsey on Thursday Feb 7th, 2008 at 1:48pm

"Very clean, lightwaeight, code" - Posted by Ron on Monday Mar 3rd, 2008 at 1:50am

"thanx, sean!
very helpful for my web-work!!

W.
" - Posted by wolga wibri on Monday Apr 21st, 2008 at 6:56am

"THIS IS VERY CLEAN." - Posted by SAIF on Saturday Dec 13th, 2008 at 8:04am

"super viagra - trasted pharmacy - Yahhooo.info/viagra.htm" - Posted by arratteduch on Friday May 1st, 2009 at 8:07pm

"super viagra - trasted pharmacy - Yahhooo.info/viagra.htm" - Posted by arratteduch on Sunday May 3rd, 2009 at 3:45am

"6iryVK dkv7Rq29nVvzm74lApqSw" - Posted by richard on Sunday May 10th, 2009 at 6:08am

"6iryVK dkv7Rq29nVvzm74lApqSw" - Posted by richard on Sunday May 10th, 2009 at 6:09am

"8zv36f bkwPpwvo03NXzw47jvGa" - Posted by george on Wednesday Jun 17th, 2009 at 3:27pm

"tC8mGA jnT3bz8Qpgj62BaK3ldfTm" - Posted by gregory on Saturday Jul 25th, 2009 at 11:44am