Tutorial: Highlight table row with the onClick function.
Have you ever have a very long table and it got really annoying for you and your visitors to look at the information? With this very simple script, your aggrevation is now over. Lets get started.
Insert this JavaScript code into the <head></head> of your HTML document.
<script>
var preEl ;
var orgBColor;
var orgTColor;
function HighLightTR(el, backColor,textColor){
if(typeof(preEl)!='undefined') {
preEl.bgColor=orgBColor;
try{ChangeTextColor(preEl,orgTColor);}catch(e){;}
}
orgBColor = el.bgColor;
orgTColor = el.style.color;
el.bgColor=backColor;
try{ChangeTextColor(el,textColor);}catch(e){;}
preEl = el;
}
function ChangeTextColor(a_obj,a_color){ ;
for (i=0;i<a_obj.cells.length;i++)
a_obj.cells(i).style.color=a_color;
}
</script>
Now it is time to add the table to the <body></body> of your HTML.
<table width="450" border="1">
<tr>
<td colspan="6">Highlight Row onClick.</td>
</tr>
<tr>
<td style="font-weight:bold">TEST</td>
<td style="font-weight:bold">TEST</td>
<td style="font-weight:bold">TEST</td>
<td style="font-weight:bold">TEST</td>
<td style="font-weight:bold">TEST</td>
<td style="font-weight:bold">TEST</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
</table>
Now where you see <tr>, insert the following code before the >:
onClick="HighLightTR(this,'#ccc','#000000');"
The first set of numbers is for the highlight behind the text. The second set is for the text.
You will now have something like this:
<table width="450" border="1">
<tr>
<td colspan="6">Highlight Row onClick.</td>
</tr>
<tr>
<td style="font-weight:bold">TEST</td>
<td style="font-weight:bold">TEST</td>
<td style="font-weight:bold">TEST</td>
<td style="font-weight:bold">TEST</td>
<td style="font-weight:bold">TEST</td>
<td style="font-weight:bold">TEST</td>
</tr>
<tr onClick="HighLightTR(this,'#ccc','#000000');">
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr onClick="HighLightTR(this,'#ccc','#000000');">
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr onClick="HighLightTR(this,'#ccc','#000000');">
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr onClick="HighLightTR(this,'#ccc','#000000');">
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
</table>
Here is the final code put together:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
var preEl ;
var orgBColor;
var orgTColor;
function HighLightTR(el, backColor,textColor){
if(typeof(preEl)!='undefined') {
preEl.bgColor=orgBColor;
try{ChangeTextColor(preEl,orgTColor);}catch(e){;}
}
orgBColor = el.bgColor;
orgTColor = el.style.color;
el.bgColor=backColor;try{ChangeTextColor(el,textColor);}catch(e){;}
preEl = el;
}function ChangeTextColor(a_obj,a_color){ ;
for (i=0;i<a_obj.cells.length;i++)
a_obj.cells(i).style.color=a_color;
}
</script>
</head>
<body>
<table width="425" border=0 align=center cellpadding="2" cellspacing="2">
<caption>
click to see effect
</caption>
<tr>
<th><strong>Test</strong></th>
<th><strong>Test</strong></th>
<th><strong>Test</strong></th>
<th><strong>Test</strong></th>
<th><strong>Test</strong></th>
<th><strong>Test</strong></th>
<tr onClick="HighLightTR(this,'#ccc','#000000');" >
<td align=left>test</td>
<td align=left>test</td>
<td align=left>test</td>
<td align=left>test</td>
<td align=left>test</td>
<td align=left>test</td>
</tr>
<tr onClick="HighLightTR(this,'#345','#000000');" >
<td align=left>test</td>
<td align=left>test</td>
<td align=left>test</td>
<td align=left>test</td>
<td align=left>test</td>
<td align=left>test</td>
</tr>
<tr onClick="HighLightTR(this,'#543','#000000');" >
<td align=left>test</td>
<td align=left>test</td>
<td align=left>test</td>
<td align=left>test</td>
<td align=left>test</td>
<td align=left>test</td>
</tr>
</table></body>
</html>
HELP SPREAD THE WORD!
Random Posts
(No Ratings Yet)
Loading ...
yeah sooooooooooooooooooo - alright bye!
Please leave your comment!