help with TR highlight script

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
lloydie-t
Forum Commoner
Posts: 88
Joined: Thu Jun 27, 2002 3:41 am
Location: UK

help with TR highlight script

Post 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>";
Unipus
Forum Contributor
Posts: 409
Joined: Tue Aug 26, 2003 2:06 pm
Location: Los Angeles, CA

Post 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.
User avatar
Vincent Puglia
Forum Commoner
Posts: 67
Joined: Thu Sep 04, 2003 4:20 pm
Location: where the World once stood

Post 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
lloydie-t
Forum Commoner
Posts: 88
Joined: Thu Jun 27, 2002 3:41 am
Location: UK

Post 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>";
Post Reply