E
Edward
Had this on the back burner for a while but now that I come to it I'm
struggling to make it work. (despite Mr. Nielsen's advice). Could
someone show me how to build one of the functions?
Thanks,
Edward
Message 1 in thread ------------------------------------------------------------
From: Edward ([email protected])
Subject: Document Object Model - table instead of form?? - slow
processing in large form!
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>
Message 2 in thread ---------------------------------------------------------------------
From: Lasse Reichstein Nielsen ([email protected])
Subject: Re: Document Object Model - table instead of form?? - slow
processing in large form!
Use:
var table = document.getElementById("table_id");
To find all the elements with the correct name inside that table, then
do:
var elems = table.getElementsByName("checkboxes_name");
That gives a collection of the elements inside the tabel, that has
the name "checkboxes_name".
Obviously, it requies the browser to support these W3C DOM methods,
which rules out Netscape 4 and IE 4.
/L
struggling to make it work. (despite Mr. Nielsen's advice). Could
someone show me how to build one of the functions?
Thanks,
Edward
Message 1 in thread ------------------------------------------------------------
From: Edward ([email protected])
Subject: Document Object Model - table instead of form?? - slow
processing in large form!
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>
Message 2 in thread ---------------------------------------------------------------------
From: Lasse Reichstein Nielsen ([email protected])
Subject: Re: Document Object Model - table instead of form?? - slow
processing in large form!
Use:
var table = document.getElementById("table_id");
To find all the elements with the correct name inside that table, then
do:
var elems = table.getElementsByName("checkboxes_name");
That gives a collection of the elements inside the tabel, that has
the name "checkboxes_name".
Obviously, it requies the browser to support these W3C DOM methods,
which rules out Netscape 4 and IE 4.
/L