Ultra fast cheap  linux and windows hosting
javascript tutorial Browse Basic JavaScript Tutorial
Browse JavaScript Script resources
Browse javascript FAQS
Categories:

javascript tutorial
buy template
Home >> Tutorials >> Advanced javascript tutorials

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>


Page contents: itechies.net - when you click on a table row the color of the row will be changed
javascript tutorial
javascript book
Buy this book