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') {
preEl.bgColor=oldBColor;
try{ChangeTextColor(preEl,oldTColor);}catch(e){;} }
var el = event.srcElement;
el = el.parentElement;
oldBColor = el.bgColor;
oldTColor = el.style.color;
el.bgColor=backColor;
try{ChangeTextColor(el,textColor);}catch(e){;}
preEl = el; }
function ChangeTextColor(txt,txtcolor){ ;
for (i=0;i< txt.cells.length;i++){<br> txt.cells(i).style.color=txtcolor;
}
}
</script>
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>Text</td>
<td>566 </td>
<td>444</td>
</tr>
<tr onClick="HighLightRow('#FFFF33','cc3333');" >
<td>Row2 </td>
<td> Text</td>
<td>200 </td>
<td>555</td>
</tr>
<tr onClick="HighLightRow('#FFFF33','cc3333');" >
<td>Row 3</td>
<td>Text </td>
<td>200 </td>
<td>555</td>
</tr>
</table>