By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
432,650 Members | 1,785 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 432,650 IT Pros & Developers. It's quick & easy.

Document Object Model - table instead of form?? - slow processing in large form!

P: n/a
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[i].name == row_1[y])
form.elements[i].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[i].name == row_2[y])
form.elements[i].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>
Jul 20 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a
eg****@hotmail.com (Edward) writes:
Is there a way to restrict the check_boxes function to its related
table?
Yes.
A document.table_id DOM object would seem to be the answer, but I can
find a reference to a table object.


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
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.