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?

Code:

	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:

Code:

 <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:

PHP Code:


        // =========== 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.

**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?

PHP Code:


<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.

Thread: highlight table row[resolved]

Thread Tools

Display

highlight table row[resolved]

Posting Permissions