problems with TR colours onclick

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

problems with TR colours onclick

Post by lloydie-t »

I need a bit of help with some javascript for a application I am writing in PHP. I have manged so far to get rows displaying colours depending on what state they are in, but if I click on the row all the colours change to the same until I hover on those rows. I need to work out a way for rows to keep thier colour regardless if I click on another. I know where the problem is, but not the solution. Have a look


Code: Select all

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

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

function tr_mouseoutnormal(tr) { 
if (!tr.jlatched) tr.className = 'jnormal'; 
else tr.className = 'jlatched'; 
}

function tr_mouseouturgent(tr) { 
if (!tr.jlatched) tr.className = 'jurgent'; 
else tr.className = 'jlatched'; 
} 

function tr_mouseoutoverdue(tr) { 
if (!tr.jlatched) tr.className = 'joverdue'; 
else tr.className = 'jlatched'; 
} 

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

function tr_clicknormal(tr) { 
var c = 0; 
while (cell = allcells.item(c++)) 
// the problem is on the following line on each of the following functions.
if (cell != tr) { 
cell.className = 'jnormal'; cell.jlatched = false; 
} 
else { 
tr.className = 'jlatched'; tr.jlatched = true; 
} 
} 

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

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

The JS would appy to the following PHP script:

Code: Select all

print "<tr class='joverdue' 
onmouseover='tr_mouseover(this)' 
onmouseout='tr_mouseoutoverdue(this)' 
onclick='tr_clickoverdue(this)(top.itemdetail.location="jobdetails.php?job_id=$row[job_id]")'>"; 
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>";
}

print "<tr class='jurgent' 
onmouseover='tr_mouseover(this)' 
onmouseout='tr_mouseouturgent(this)' 
onclick='tr_clickurgent(this)(top.itemdetail.location="jobdetails.php?job_id=$row[job_id]")'>"; 
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>";
}
You can see my problem at:
http://www.idealoffices.plus.com/tr_row_test.html

WaDaYaThink?[/url]
User avatar
kendall
Forum Regular
Posts: 852
Joined: Tue Jul 30, 2002 10:21 am
Location: Trinidad, West Indies
Contact:

Post by kendall »

Yo man,

i think you need to give each a unique 'id' so that it will identify the exact tr or td you need to hover

since you are dynamically creating the tr and td you got to dynamically create the id then do a

onMouseOver = thefunction(document.getElemenById(the_id));

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

Post by lloydie-t »

Thanx Kendall. I got there on my own, but at least some cares
Post Reply