ASM wrote on 25 sep 2005 in comp.lang.javascript:
Gary a écrit :
I have a table with a form consisting of several checkboxes and I'm
wondering if its possible to change the table row background color
on mouseover or hover and make it stay that color when the checkbox
in that row is selected?
Poko
No, you have a form containing a table
(table can't contain a form)
(table can contain elements of a form)
see that :
http://perso.wanadoo.fr/stephane.moriaux/truc/tables_highlight_rows_en.
htm
<html><form><table border=1 cellspacing=0> [..]
</html>
This will hover and will be clickable along the whole <tr>:
<html>
<style type="text/css">
.backCol { background-color:yellow;}
.hoverbackCol { background-color:blue;color:white;}
</style>
<script type="text/javascript">
function ifhover(x,istrue) {
if (istrue) bgsave=x.className
x.className = (istrue)?'hoverbackCol':
(x.firstChild.firstChild.checked)? 'backCol' : '';
}
function clickhighLght(x) {
x.firstChild.firstChild.checked =
!x.firstChild.firstChild.checked;
x.className =
(x.firstChild.firstChild.checked)? 'backCol' : '';
}
function highLght(chckbox) {
clickhighLght(chckbox.parentNode.parentNode);
}
</script>
<form>
<table border=1 cellspacing=0>
<tr onclick="clickhighLght(this)"
onmouseover="ifhover(this,true)"
onmouseout="ifhover(this, false)">
<td>
<input type=checkbox onclick="highLght(this)">
</td>
<td>blah</td><td>blah</td><td>blah</td>
</tr>
<tr onclick="clickhighLght(this)"
onmouseover="ifhover(this,true)"
onmouseout="ifhover(this, false)">
<td>
<input type=checkbox onclick="highLght(this)">
</td>
<td>blah</td><td>blah</td><td>blah</td>
</tr>
</table>
</form>
</html>