E
Edward
The below code creates an HTML form that's comprised of 2 tables.
There is an onClick function in each table that checks or unchecks all
checkboxes in the table.
The code is basically a trimmed down version of a page I'm writing
that can have up to 7 tables with 96 checkboxes in each table. The
onClick 'checkbox toggle' function takes around 20 seconds to complete
(100% cpu during processing!). I presume this is because all elements
in the taskform are being examined. Is there a way to restrict the
check_boxes function to its related table?
A document.table_id DOM object would seem to be the answer, but I can
find a reference to a table object.
Help appreciated!
Ed.
<html>
<head>
<title></title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
<!--
var row_1 = new Array("Monday0", "Monday1")
function check_boxes1() {
var form = document.taskform;
var state = false;
if (form.checkall_row1.checked) state = true;
for (y=0; y < row_1.length; y++) {
for (i = 0; i < form.elements.length; i++) {
if (form.elements.name == row_1[y])
form.elements.checked = state;
}
}
}
var row_2 = new Array("Monday2", "Monday3")
function check_boxes2() {
var form = document.taskform;
var state = false;
if (form.checkall_row2.checked) state = true;
for (y=0; y < row_2.length; y++) {
for (i = 0; i < form.elements.length; i++) {
if (form.elements.name == row_2[y])
form.elements.checked = state;
}
}
}
-->
</script>
<form name=taskform action=test.php method=post>
<table id=tbl1 border=1 width=85%>
<tr>
<td class=small>Check increment</td>
<td class=small>toggle</td>
<td class=small>0:00</td><td class=small>1:00</td>
</tr>
<tr>
<td></td>
<td><input type=checkbox name=checkall_row1
onClick="check_boxes1(true)"></td>
<td><input type=checkbox name=Monday0></td>
<td><input type=checkbox name=Monday1></td>
</tr>
</table>
<table id=tbl2 border=1 width=85%>
<tr>
<td class=small>Check increment</td>
<td class=small>toggle</td>
<td class=small>0:00</td><td class=small>1:00</td>
</tr>
<tr>
<td></td>
<td><input type=checkbox name=checkall_row2
onClick="check_boxes2(true)"></td>
<td><input type=checkbox name=Monday2></td>
<td><input type=checkbox name=Monday3></td>
</tr>
</table>
</form>
</body>
</html>
There is an onClick function in each table that checks or unchecks all
checkboxes in the table.
The code is basically a trimmed down version of a page I'm writing
that can have up to 7 tables with 96 checkboxes in each table. The
onClick 'checkbox toggle' function takes around 20 seconds to complete
(100% cpu during processing!). I presume this is because all elements
in the taskform are being examined. Is there a way to restrict the
check_boxes function to its related table?
A document.table_id DOM object would seem to be the answer, but I can
find a reference to a table object.
Help appreciated!
Ed.
<html>
<head>
<title></title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
<!--
var row_1 = new Array("Monday0", "Monday1")
function check_boxes1() {
var form = document.taskform;
var state = false;
if (form.checkall_row1.checked) state = true;
for (y=0; y < row_1.length; y++) {
for (i = 0; i < form.elements.length; i++) {
if (form.elements.name == row_1[y])
form.elements.checked = state;
}
}
}
var row_2 = new Array("Monday2", "Monday3")
function check_boxes2() {
var form = document.taskform;
var state = false;
if (form.checkall_row2.checked) state = true;
for (y=0; y < row_2.length; y++) {
for (i = 0; i < form.elements.length; i++) {
if (form.elements.name == row_2[y])
form.elements.checked = state;
}
}
}
-->
</script>
<form name=taskform action=test.php method=post>
<table id=tbl1 border=1 width=85%>
<tr>
<td class=small>Check increment</td>
<td class=small>toggle</td>
<td class=small>0:00</td><td class=small>1:00</td>
</tr>
<tr>
<td></td>
<td><input type=checkbox name=checkall_row1
onClick="check_boxes1(true)"></td>
<td><input type=checkbox name=Monday0></td>
<td><input type=checkbox name=Monday1></td>
</tr>
</table>
<table id=tbl2 border=1 width=85%>
<tr>
<td class=small>Check increment</td>
<td class=small>toggle</td>
<td class=small>0:00</td><td class=small>1:00</td>
</tr>
<tr>
<td></td>
<td><input type=checkbox name=checkall_row2
onClick="check_boxes2(true)"></td>
<td><input type=checkbox name=Monday2></td>
<td><input type=checkbox name=Monday3></td>
</tr>
</table>
</form>
</body>
</html>