Okay, you want to chnge the row colour when the checkbox is clicked, and open a window. I presume that there are multiple rows of these within the table, so we want a way to attach events on to the inputs without affecting other parts of the page.
As there are likely to be many rows, instead of attaching multiple events onto multiple inputs, we can instead allow the input events to bubble up the DOM to a common point, that point being the table that contains all of the rows.
To attach the script, we need to be able to refer to some part of the table. Presuming that the div is a container for just the table, a good place to attach this one on to is the div itself, by giving the div a name that best describes its contents.
Change the name “someList” in all of the sample code to a name that most appropriately describes the table.
I will leave discussion about the inline presentation for later.
<div id="someList" align=center>
...
When you change the row colour, we will change the class name of the row to “checked”. We need to let the browser know what colour we want to use when that class is set. This stylesheet declaration does that for us.
#someList tr.checked {
background-color: #6699cc;
}
Now we want the script that will set the class name based on the state of the checkbox.
You can put the script just before </body> which allows the script to easily find the page while it’s loading.
<script type="text/javascript">
...
</script>
</body>
The script itself will get the identifier for the table, and attach an onclick event on to it, so that you can capture all of the click events that occur.
var list = document.getElementById('someList');
list.onclick = function (evt) {
...
};
When a click event occurs, you want only in ones that are input elements
evt = evt || window.event;
var targ = evt.target || evt.srcElement;
if (!(targ && targ.nodeName && targ.nodeName === 'INPUT' && targ.type === 'checkbox')) {
return;
}
...
Now that you have an input that has been clicked, you want to set the class name of the row, depending on whether the checkbox is enabled or not.
list.onclick = function (evt) {
...
updateRowColour(targ);
};
function updateRowColour(input) {
...
}
The updateRowColour function needs to set the class name of the row. The first parent of the checkbox is the td element, and the parent of the td element is the tr element. So we need to go up two parents to get the the row.
function updateRowColour(input) {
var checked = '';
if (input.checked) {
checked = 'checked';
}
input.parentNode.parentNode.className = checked;
}
There are other ways of finding the parent that involve loops, but what we have will do well for now.
Finally, you said that you want to open up a new window to go somewhere.
...
updateRowColour(targ);
window.open('somePage.html');
And you’re all good to go.
Here is the full code for the test page.
<html>
<head>
<style type="text/css">
#someList table table tr.checked {
background-color: #6699cc;
}
</style>
</head>
<body>
<div id="someList" align=center>
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 style="border: 1px Solid #6699CC;">
<tr>
<td>
<TABLE BORDER=0 CELLPADDING=2 CELLSPACING=2 style="font-size:11px;font-family:tahoma;" width="100%" BGCOLOR=WHITE>
<tr bgcolor=#dcdcdc>
<td align=center>Seleziona checkbox</td>
<td align=center><b>Colonna A</b></td>
<td align=center><b>Colonna B</b></td>
<td align=center><b>Colonna C</b></td>
<td align=center><b>Colonna D</b></td>
<td align=center><input type=checkbox name=C1 value=ON></td>
<td align=right>CMP</td>
<td align=right>07/02/2010</td>
<td align=center>06:43</td>
<td align=left>SALERNO NORD</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
var list = document.getElementById('someList');
list.onclick = function (evt) {
evt = evt || window.event;
var targ = evt.target || evt.srcElement;
if (!(targ && targ.nodeName && targ.nodeName === 'INPUT' && targ.type === 'checkbox')) {
return;
}
updateRowColour(targ);
window.open('somePage.html');
};
function updateRowColour(input) {
var checked = '';
if (input.checked) {
checked = 'checked';
}
input.parentNode.parentNode.className = checked;
}
</script>
</body>
</html>