PDA

Click to See Complete Forum and Search --> : highlight table row[resolved]

ober0330
May 20th, 2004, 10:33 AM
Ok, so I have the following Javascript functions which I use to change the background color of TD elements. Now I want to highlight an entire row when the mouse is over any TD element of that row. I've copied the changeto function and played with it and called it "changeto2", but what I'm doing doesn't seem to work. Help?


function changeto(highlightcolor){
source=event.srcElement
if (source.tagName=="TR"||source.tagName=="TABLE")
return
while(source.tagName!="TD")
source=source.parentElement
if (source.style.backgroundColor!=highlightcolor&&source.id!="ignore")
source.style.backgroundColor=highlightcolor
}

function changeto2(highlightcolor){
source=event.srcElement
if (source.tagName=="TABLE"||source.tagName=="TD")
return
while(source.tagName!="TR")
source=source.parentElement
if (source.style.backgroundColor!=highlightcolor&&source.id!="ignore")
source.style.backgroundColor=highlightcolor
}

function changeback(originalcolor){
if (event.fromElement.contains(event.toElement)||source.contains(event.toElement)||source.id=="ignore")
return
if (event.toElement!=source)
source.style.backgroundColor=originalcolor
}
ober0330
May 20th, 2004, 01:56 PM
Ok, I've changed to a different piece of code, but still can't get it to work. Here is the Javascript:

<script>
//+-+-+-+-+-+-+-+-+-+-+-+-+for highlight row+-+-+-+-+-+-+-+-+-+-+-+-+//
//argument: backColor - highlight bgColor of the row
// textColor - lighlight text color
//call: like <tr onmouseover="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>


And the PHP code I'm using:

// =========== Data ===========================================
echo "<table width=" . $tablewidth . " cols=7 border=0 cellpadding=4 cellspacing=2>";
$rowcolor = 0;
while($row = @mssql_fetch_array($result))
{
echo "<tr onmouseover=\"HighLightTR('blue','red');\">";
echo "<td width=20% class=row" . $rowcolor . "><a href=" . $sendto . "?ID=" . $row['ID'] . ">" . @date('m/d/Y', strtotime($row['Date Discovered'])) . "</a></td>";
if($_GET['type'] == "1")
echo "<td width=15% class=row" . $rowcolor . ">" . $row['Cell Number'] . "</td>";
echo "<td width=15% class=row" . $rowcolor . ">" . $row['Component Tag Number'] . "</td>";
echo "<td width=30% class=row" . $rowcolor . ">" . $row['Component Description'] . "</td>";
if($_GET['type'] == "2")
echo "<td width=35% class=row" . $rowcolor . ">" . $row['Problem Symptoms'] . "</td>";
echo "</tr>";

if($rowcolor == 0)
$rowcolor = 1;
else
$rowcolor = 0;
}

echo "</table>";and for some reason it won't change the background color of the tables... it changes the font, but not the background. :cry:
ober0330
May 20th, 2004, 02:05 PM
And FYI, I've tested this on another page and it works fine. It seems to be something in the php that is screwing me over.
lleemon
Jun 4th, 2004, 10:05 AM
Your correct.

The following works for me but I had to strip out the while loop. Are you sure you query has records returning?

<body>
<?php
$tablewidth = 700;
$sendto = "http://test.com";
?>
<table width=<?php $tablewidth ?> cols=7 border=0 cellpadding=4 cellspacing=2>
<?php
$rowcolor = 0;
?>
<tr onmouseover="HighLightTR('#33FF33','red');">
<td width=20% class=row<?php $rowcolor ?>><a href="<?php $sendto ?>"?ID=2>Test</a></td>
<td width=15% class=row<?php $rowcolor?>>88</td>
<td width=15% class=row<?php $rowcolor?>>44</td>
<td bgcolor=""width=30% class=row<?php $rowcolor?>>45</td>

</tr>

<?php
if($rowcolor == 0)
$rowcolor = 1;
else
$rowcolor = 0;
?>

<tr onmouseover="HighLightTR('blue','red');">
<td width=20% class=row<?php $rowcolor ?>><a href="<?php $sendto ?>"?ID=1>Date</a></td>
<td width=15% class=row<?php $rowcolor?>>12</td>
<td width=15% class=row<?php $rowcolor?>>13</td>
<td width=30% class=row<?php $rowcolor?>>14</td>
</tr>
</table>
</body>
ober0330
Jun 4th, 2004, 11:51 AM
umm... yeah, the code you just gave me is completely worthless... but whatever. I already got this to work. For some reason the mouseover events did not work well with a class definition.