Steve said:
1. I don't have a grasp of the 'index' concept. i.e the index you are
looping through to find the row you are on. Are you basically using the
row ids to achieve this or is this index independent of the row ids? I
guess I am asking if it's not the row ids where has this index come
from?
When you have several form controls that have the same name, they
are accessible as an Array, so the multiple instances of "alpha"
can be referred to as alpha[0], alpha[1], etc. This is separate
from the row id.
2. I thought that '==' was the notation for an equality condition in
javascript, can you explain the three equal signs you have used '==='?
I could have used "==" in this case, but "===" is a bit safer when
comparing complex Objects. It eliminates the chance that the two
objects only appear to be identical after a type conversion.
http://docs.sun.com/source/816-6408-10/ops.htm#1060974
3. Is it possible to include onmouseover and onmouseout color change
events for the rows, i.e the row color changes onmouseover and then
onmouseout but NOT when 3rd column checkbox has been clicked. i.e the
real question is How can the color which is applied by the 3rd column
check box being clicked stay put regardless of a mouseout or mouseover
color change?
Extract the row number from the id of the row that fired the event
and check the disabled attribute of one of the checkboxes that has
that row number as its index:
<html>
<head>
<script type="text/javascript">
function hilight(row,state) {
var stateColor=["white","green"];
var rowNum=row.id.substr(3); // ignore first three characters
if(!document.forms[0].alpha[rowNum].disabled) {
row.style.backgroundColor=stateColor[state];
}
}
function disableRow(box) {
// Find the index of "this" checkbox by comparing the control
// to all elements sharing its name. We assume that there are
// more than one, so that it actually has an index.
for(i=0;i<box.form.elements[box.name].length;i++) {
if(box.form.elements[box.name]
===box) {
break;
}
}
// Set the disabled attribute of the other two checkboxes that
// have the same index.
box.form.alpha.disabled=box.checked;
box.form.beta.disabled=box.checked;
// Set the background color of the <TR> element whose name is
// "row<thisIndex>".
if(box.checked) {
document.getElementById("row"+i).style.backgroundColor="yellow";
} else {
document.getElementById("row"+i).style.backgroundColor="white";
}
}
</script>
</head>
<body>
<form>
<table>
<tr id="row0" onmouseover="hilight(this,1)" onmouseout="hilight(this,0)">
<td><input type="checkbox" name="alpha"></td>
<td><input type="checkbox" name="beta"></td>
<td><input type="checkbox" name="gamma" onclick="disableRow(this)"></td>
</tr>
<tr id="row1" onmouseover="hilight(this,1)" onmouseout="hilight(this,0)">
<td><input type="checkbox" name="alpha"></td>
<td><input type="checkbox" name="beta"></td>
<td><input type="checkbox" name="gamma" onclick="disableRow(this)"></td>
</tr>
<tr id="row2" onmouseover="hilight(this,1)" onmouseout="hilight(this,0)">
<td><input type="checkbox" name="alpha"></td>
<td><input type="checkbox" name="beta"></td>
<td><input type="checkbox" name="gamma" onclick="disableRow(this)"></td>
</tr>
<tr id="row3" onmouseover="hilight(this,1)" onmouseout="hilight(this,0)">
<td><input type="checkbox" name="alpha"></td>
<td><input type="checkbox" name="beta"></td>
<td><input type="checkbox" name="gamma" onclick="disableRow(this)"></td>
</tr>
<tr id="row4" onmouseover="hilight(this,1)" onmouseout="hilight(this,0)">
<td><input type="checkbox" name="alpha"></td>
<td><input type="checkbox" name="beta"></td>
<td><input type="checkbox" name="gamma" onclick="disableRow(this)"></td>
</tr>
</table>
</body>
</html>