Page 1 of 1

onclick = highlight row

Posted: Tue Nov 11, 2003 4:44 am
by valen53
i have a table to display the record. when i onclick the row, it will highlight entire row. But i got a problem, when i click the hyperlink in one of the cell, it only highlight that cell only. But i want to highlight entire row.
Anyone can help me ? thank you............

below is coding :

Code: Select all

<?php
echo" <tr onClick="HighLightTR('#c9cc99','cc3333');" >";
echo'
     <td width="6%" >'.$no.'</td>
     <td width="14%"><a href="add_race.php">'.$Ecat.'</a></td>
</tr>
?>

Code: Select all

&lt;script language="JavaScript1.2"&gt;
var preEl ;
var orgBColor;
var orgTColor;
function HighLightTR(backColor,textColor)&#123;
  
  if(typeof(preEl)!='undefined') &#123;
     preEl.bgColor=orgBColor;
     try&#123;ChangeTextColor(preEl,orgTColor);&#125;catch(e)&#123;;&#125;
     &#125;
  var el = event.srcElement;
  el = el.parentElement;
  orgBColor = el.bgColor;
  orgTColor = el.style.color;
  el.bgColor=backColor;

  try&#123;ChangeTextColor(el,textColor);&#125;catch(e)&#123;;&#125;
  preEl = el;
  &#125;

function ChangeTextColor(a_obj,a_color)&#123;  ;
   for (i=0;i&lt;a_obj.cells.length;i++)
    a_obj.cells(i).style.color=a_color;
    &#125;
&lt;/script&gt;

Posted: Tue Nov 11, 2003 10:26 pm
by volka
the event occurs for the anchor element thus the parent element is the table-cell. You have to either let the event bubble up or search for the right parent (a <tr> element )

Posted: Tue Nov 11, 2003 11:49 pm
by valen53
Thank ur reply.......
But my java script skill really quite new. And i not very understand about

" search for the right parent (a <tr> element ) "

can u show me some example about it ?

Posted: Wed Nov 12, 2003 1:38 am
by volka

Code: Select all

var el = event.srcElement;
el = el.parentElement;
here you fetch the parent element.
If you want to rely on "there's always a <tr>-element above the clicked element and it's always the elment searched" you might try

Code: Select all

var el = event.srcElement;
while(el.tagName.toUpperCase() != "TR")
	el = el.parentElement;

regarding last question u answer me

Posted: Wed Mar 17, 2004 12:43 am
by valen53
hi, volka..
regarding last question u answer me, onclick = highlight row.
now i got similar problem.

The function i want is when i change the select box, the checkbox will automatic checked.
i use name = "editbox[]" b'cos i use foreach().
<input name="editbox[]" type="checkbox">

Below is the Source

Code: Select all

<script language="JavaScript"> 
function tickIt(form) 
&#123; 
document.forms&#1111;0].editbox&#1111;].checked = true ; 
&#125; 
</script> 

while loop &#123; 
<select name="select" onChange ="tickIn(this.form)"> 
<option value="1" >H</option> 
<option value="2" >A</option> 
</select> 
<input name="editbox&#1111;]" type="checkbox" id="editbox" value="<? echo $row_mat_id ?>"> 
&#125;
Javascipt syntax error.
document.forms[0].editbox[].checked = true ;