Hoe kan ik deze code aanpassen zodat als er op wordt geklikt de kleur veranderd naar highlight? Of is dat niet mogelijk omdat er ook een mouseout staat?
Nee, sorry, je kan alle events op een tr gebruiken... Je hebt er zelfs nog meer: onfocus, onblur, onkeypress; je kan deze allemaal tegelijk gebruiken. Ik heb je alleen een voorbeeld gegeven hoe je 2 verschillende commando's in een event kan stoppen...
Je kan dus zeker een onclik, onmouseover en onmouseout tegelijk gebruiken.
onmouseover en onclick hebben idd dezelfde class.
Bij mouseout wil ik terug naar dezelfde kleur tenzij er op geklikt is, dan wil ik de highlight behouden.
Dan zul je een functie moeten maken die controleerd of hij aangeklikt is, en dan pas de highlight niet uitzet als je eraf gaat. Het is met JS op te lossen, maar het is wel meer werk. Wat nu gebeurd is dat ongeacht of erop geklikt is of niet, de highlight toch weg gaat... Het is niet onmogelijk, ik kan wel een kort voorbeeld schrijven, maar dan moet je even tot vanavond wachten, want ik moet zo naar school ;)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Klein voorbeeldje</title>
<style>
<!--
tr{
background-color:#999;
color:#FFF;
}
.tr_changed{
background-color:#333;
color:#FFF;
}
-->
</style>
<script language="javascript">
<!--
var objects=new Array();
objects[0]=false;
objects[1]=false;
objects[2]=false;
//enzovoort...;
function eventMouseOut(o){
var n=parseInt(o);
if(objects[n]==true){
//Het object is geselecteerd, dus hij moet niet van kleur veranderen...;
return true;
}
else{
//Het object is niet geselecteerd, dus de kleur moet veranderen...;
var objId="tr"+o;
document.getElementById(objId).className="tr";
return true;
}
}
function eventMouseClick(o){
var n=parseInt(o);
if(objects[n]==true) objects[n]=false;
else objects[n]=true;
return true;
//Bij 2x klikken wordt hij dus weer gedeselecteerd
}
-->
</script>
</head>
<body>
<table>
<tr onclick="eventMouseClick('0');showDetails(<?PHP echo $row['id'] ?>)" onmouseover="this.className='tr_changed'" onmouseout="eventMouseOut('0')" id="tr0">
<td>abc</td><td>def</td>
</tr>
<tr onclick="eventMouseClick('1');showDetails(<?PHP echo $row['id'] ?>)" onmouseover="this.className='tr_changed'" onmouseout="eventMouseOut('1')" id="tr1">
<td>ghi</td><td>jkl</td>
</tr>
<tr onclick="eventMouseClick('2');showDetails(<?PHP echo $row['id'] ?>)" onmouseover="this.className='tr_changed'" onmouseout="eventMouseOut('2')" id="tr2">
<td>mno</td><td>pqr</td>
</tr>
</table>
</body>
</html>
Je moet wel nog even kijken naar de indeling van het script, want ik denk dat je de id uit een database haalt, en dan veranderd dat de zaak weer enigsinds...
