Page 1 of 1

help with TR highlight script

Posted: Mon Sep 29, 2003 6:45 pm
by lloydie-t
I will admit that I am being lazy here, but that is only because I got a head full of PHP with no time to learn JS. I have edited a bit of javascipt I found so that it highlights a row on mouse over and when you click on the row it goes darker. I also need to open a URL in a different frame from the same click. Can you help? Please find code below, but bear in mind there is some PHP.

Code: Select all

<style type="text/css">  

th.jnormal {  
font: 600 12px tahoma,verdana,arial,sans-serif; 
text-style: bold; 
text-align: center;
background: #ffffff;  
} 

tr.othertr {  
font: 200 12px tahoma,verdana,arial,sans-serif;  
background: #ffffff;
tr align: left;
td align: left; 
} 

tr.jnormal {  
font: 200 12px tahoma,verdana,arial,sans-serif;  
text-align: center;
background: #ffffff;  
cursor: pointer; 
cursor: hand; 
} 

tr.jover {
font: 200 12px tahoma,verdana,arial,sans-serif; 
text-align: center; 
background: #e0e0e0;
cursor: pointer; 
cursor: hand;  
} 

tr.jout {  
font: 200 12px tahoma,verdana,arial,sans-serif; 
text-align: center;
background: #ffffff;  
cursor: pointer; 
cursor: hand; 
} 

tr.jlatched { 
font: 200 12px tahoma,verdana,arial,sans-serif; 
text-align: center;
background: #c1c1c1;
} 
</style>
<script type="text/javascript" language="javascript"> 

var allcells = document.getElementsByTagName('tr'); 

function tr_mouseover(tr) { 
if (!tr.jlatched) tr.className = 'jover'; 
} 

function tr_mouseout(tr) { 
if (!tr.jlatched) tr.className = 'jout'; 
else tr.className = 'jlatched'; 
} 

function tr_click(tr) { 
var c = 0; 
while (cell = allcells.item(c++)) 
if (cell != tr) { 
cell.className = 'jout'; cell.jlatched = false; 
} 
else { 
tr.className = 'jlatched'; tr.jlatched = true; 
} 
} 

</script>

Code: Select all

//this is where i need the url link
print "<tr class="jnormal" 
onmouseover="tr_mouseover(this)"
onmouseout="tr_mouseout(this)" 
onclick="tr_click(this)">";

    print "<td class="jobstable" width="50">$row[job_id]</td>";
    print "<td class="jobstable" width="100">$row[cust_name]</td>";
    print "<td class="jobstable">$row[job_notes]...</td>"; 
    print "<td class="jobstable" width="65">$row[job_start]</td>";
    print "</tr>";

Posted: Mon Sep 29, 2003 7:13 pm
by Unipus
Well, that's easy, assuming the URL you want to open is consistent. Otherwise, it gets a little more complicated. Just put a document.location or document.src = 'wherever' as part of your onClick statement.

Now for the part you'll both love and hate... you can greatly simplify your styles and your code. Instead of switching classes onMouseover (which I'm not entirely sure would be supported cross-browser), how about just changing the one property you seem to care about? For instance:

Code: Select all

function tr_mouseover(tr) &#123; 
if document.getElementbyId(tr).style.backgroundColor = '#e0e0e0'; 
&#125; 

function tr_mouseover(tr) &#123; 
if document.getElementbyId(tr).style.backgroundColor = '#ffffff'; 
&#125;
Then you only need to set ONE class and you eliminate redundancies.

Posted: Tue Sep 30, 2003 9:13 am
by Vincent Puglia

Code: Select all

<table>
<tr class='jnormal' 
onmouseover='tr_mouseover(this)' 
onmouseout='tr_mouseout(this)' 
onclick='tr_click([b]top.frameName.location="http://members.aol.com/grassblad"[/b])'> 
<td class='jobstable' width='50'>$row[job_id]</td> 
<td class='jobstable' width='100'>$row[cust_name]</td> 
<td class='jobstable'>$row[job_notes]...</td> 
<td class='jobstable' width='65'>$row[job_start]</td> 
</tr>
....
</table>

top.frameName.location="http://members.aol.com/grassblad"
where 'frameName' is the name of the target frame.

other things to consider:
placing an index number in the tr's id property so that you can put all of the page urls in an array and then access them with the tr's id.

Vinny

Posted: Thu Oct 02, 2003 1:33 pm
by lloydie-t
Thanks all. This is what worked for me. Not exactly sure why.

Code: Select all

print "<tr class='jnormal' 
onmouseover='tr_mouseover(this)' 
onmouseout='tr_mouseout(this)' 
onclick='tr_click(this)(top.itemdetail.location="test.php")'>"; 
print "<td class='jobstable' width='50'>$row[job_id]</td>"; 
print "<td class='jobstable' width='100'>$row[cust_name]</td>"; 
print "<td class='jobstable'>$row[job_notes]...</td>"; 
print "<td class='jobstable' width='65'>$row[job_start]</td>"; 
print "</tr>";