Highlight a table row

[Total: 0    Average: 0/5]

Generic function to hightlight a current table row by click a row.

Head Code:

<script>
//+-+-+-+-+-+-+-+-+-+-+-+-+for highlight row+-+-+-+-+-+-+-+-+-+-+-+-+//
//desc: Highligt current row by click any cell
//by: Qing-Hua Jiang
//argument: backColor - highlight bgColor of the row
// textColor - lighlight text color
//call: like <tr onClick="HighLightTR('#c9cc99','cc3333');" id="trO4">

var preEl ;
var orgBColor;
var orgTColor;
function HighLightTR(backColor,textColor){  
if(typeof(preEl)!='undefined') {
preEl.bgColor=orgBColor; 
try{ChangeTextColor(preEl,orgTColor);}catch(e){;}
} 
var el = event.srcElement;
el = el.parentElement;
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++){//put condition before increase!!!!!
a_obj.cells(i).style.color=a_color; 
}
}

//+-+-+-+-+-+-+-+-+-+-+-+-+End of highlight row+-+-+-+-+-+-+-+-+-+-+-+-+//
</script>

Body Code:

<table border=1 align=center>
<caption>Table Caption</caption>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Col 5</th>
<th>Col 6</th>
<th>Col 7</th>
<th>Col 8</th>
<th>Col 9</th>
<th>Col 10</th>
<th>Col 11</th>
<th>Col 12</th>
<th>Col 13</th>
<tr  onClick="HighLightTR('#c9cc99','cc3333');" > 
<td align=right>data-1-1</td>
<td align=right>data-1-2</td>
<td align=right>data-1-3</td>
<td align=right>data-1-4</td>
<td align=right>data-1-5</td>
<td align=right>data-1-6</td>
<td align=right>data-1-7</td>
<td align=right>data-1-8</td>
<td align=right>data-1-9</td>
<td align=right>data-1-10</td>
<td align=right>data-1-11</td>
<td align=right>data-1-12</td>
<td align=right>data-1-13</td>
</tr>
<tr  onClick="HighLightTR('#c9cc99','cc3333');" > 
<td align=right>data-2-1</td>
<td align=right>data-2-2</td>
<td align=right>data-2-3</td>
<td align=right>data-2-4</td>
<td align=right>data-2-5</td>
<td align=right>data-2-6</td>
<td align=right>data-2-7</td>
<td align=right>data-2-8</td>
<td align=right>data-2-9</td>
<td align=right>data-2-10</td>
<td align=right>data-2-11</td>
<td align=right>data-2-12</td>
<td align=right>data-2-13</td>
</tr>
<tr  onClick="HighLightTR('#c9cc99','cc3333');" > 
<td align=right>data-3-1</td>
<td align=right>data-3-2</td>
<td align=right>data-3-3</td>
<td align=right>data-3-4</td>
<td align=right>data-3-5</td>
<td align=right>data-3-6</td>
<td align=right>data-3-7</td>
<td align=right>data-3-8</td>
<td align=right>data-3-9</td>
<td align=right>data-3-10</td>
<td align=right>data-3-11</td>
<td align=right>data-3-12</td>
<td align=right>data-3-13</td>
</tr>
<tr  onClick="HighLightTR('#c9cc99','cc3333');" > 
<td align=right>data-4-1</td>
<td align=right>data-4-2</td>
<td align=right>data-4-3</td>
<td align=right>data-4-4</td>
<td align=right>data-4-5</td>
<td align=right>data-4-6</td>
<td align=right>data-4-7</td>
<td align=right>data-4-8</td>
<td align=right>data-4-9</td>
<td align=right>data-4-10</td>
<td align=right>data-4-11</td>
<td align=right>data-4-12</td>
<td align=right>data-4-13</td>
</tr>
<tr  onClick="HighLightTR('#c9cc99','cc3333');" > 
<td align=right>data-5-1</td>
<td align=right>data-5-2</td>
<td align=right>data-5-3</td>
<td align=right>data-5-4</td>
<td align=right>data-5-5</td>
<td align=right>data-5-6</td>
<td align=right>data-5-7</td>
<td align=right>data-5-8</td>
<td align=right>data-5-9</td>
<td align=right>data-5-10</td>
<td align=right>data-5-11</td>
<td align=right>data-5-12</td>
<td align=right>data-5-13</td>
</tr>
<tr  onClick="HighLightTR('#c9cc99','cc3333');" > 
<td align=right>data-6-1</td>
<td align=right>data-6-2</td>
<td align=right>data-6-3</td>
<td align=right>data-6-4</td>
<td align=right>data-6-5</td>
<td align=right>data-6-6</td>
<td align=right>data-6-7</td>
<td align=right>data-6-8</td>
<td align=right>data-6-9</td>
<td align=right>data-6-10</td>
<td align=right>data-6-11</td>
<td align=right>data-6-12</td>
<td align=right>data-6-13</td>
</tr>
</table> 

Times Viewed: 6

Leave a Reply

Your email address will not be published. Required fields are marked *