Hightlight a table row

Home >> Tutorials >> Javascript tutorials

Click on a row in the table, and watch it become hightlighted. You can specific bgColor & text Color for your highlight.

Col 1> Col 2> Col 3> Col 4>
row1 Text 566 444
Row2 Text 200 555
Row 3 Text 200 555

Complete Source Code:

Put the folowing in betwen <head> .. </ head>

<script > 
var preEl ; 
var oldBColor; 
var oldTColor; 
function HighLightRow(backColor,textColor){ 
if(typeof(preEl)!='undefined') { 
try{ChangeTextColor(preEl,oldTColor);}catch(e){;} } 
var el = event.srcElement; 
el = el.parentElement; 
oldBColor = el.bgColor; 
oldTColor = el.style.color; 
preEl = el; } 
function ChangeTextColor(txt,txtcolor){ ; 
for (i=0;i< txt.cells.length;i++){<br> txt.cells(i).style.color=txtcolor; 


Put the folowing in betwen <body> .. </ body>

<table border=1 width="534 > 
<th> Col 1></th> 
<th> Col 2></th> 
<th> Col 3></th> 
<th> Col 4></th> 
<tr onClick="HighLightRow('#FFFF33','cc3333');" > 
<td>row1 </td> 
<td>566 </td> 
<tr onClick="HighLightRow('#FFFF33','cc3333');" > 
<td>Row2 </td> 
<td> Text</td> 
<td>200 </td> 
<tr onClick="HighLightRow('#FFFF33','cc3333');" > 
<td>Row 3</td> 
<td>Text </td> 
<td>200 </td>