Hightlight
a table row
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 5 |
Col 6 |
Col 7 |
Col 8 |
Col 9 |
| Row 1 |
Text |
15 |
556 |
144 |
175 |
213 |
414 |
| Row 2 |
Text |
12 |
500 |
112 |
156 |
462 |
217 |
| Row 3 |
Text |
40 |
573 |
129 |
195 |
530 |
228 |
| Row 4 |
Text |
69 |
67 |
12 |
18 |
445 |
901 |
| Row 5 |
Text |
20 |
0 |
0 |
0 |
330 |
100 |
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>
