Page 1 of 1

problems with TR colours onclick

Posted: Thu Oct 30, 2003 6:19 am
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]

Posted: Mon Nov 03, 2003 1:43 pm
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

Posted: Fri Nov 07, 2003 3:20 pm
by lloydie-t
Thanx Kendall. I got there on my own, but at least some cares