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

[Edward]

The below code builds 2 tables 4 rows by 4 cols. All cells have
checkboxes. When checked, the checkboxes in the first column
automatically check the remainder of the check boxes in the same row.

This is working fine for tables of this size. Unfortunately, my app
produces lots of considerably bigger tables and the 'toggle' can take
over a minute to complete!!

I assume this is because for each toggle, the all form elements are
searched through to see if they match.

Is it possible to change this so that a toggle only has to search the
elements of the table it appears in - rather than the whole form?

A document.table_id DOM object would seem to be the answer, but I can
find a reference to a table object.

Your assistance is appreciated!

Edward

CODE:

<form name=taskform action=check_submit.php method=post>

<script language="JavaScript"> <!--

var row_1Monday = new Array("Monday0", "Monday4", "Monday8")
function check_boxes1Monday() {var state = false;if
(document.taskform.checkall_row1Monday.checked) state = true; for
(y=0; y < row_1Monday.length; y++) { for (i = 0; i <
document.taskform.elements.length; i++) { if
(document.taskform.elements[i].name == row_1Monday[y])
document.taskform.elements[i].checked = state; }; }}

var row_2Monday = new Array("Monday1", "Monday5", "Monday9")
function check_boxes2Monday() {var state = false;if
(document.taskform.checkall_row2Monday.checked) state = true; for
(y=0; y < row_2Monday.length; y++) { for (i = 0; i <
document.taskform.elements.length; i++) { if
(document.taskform.elements[i].name == row_2Monday[y])
document.taskform.elements[i].checked = state; }; }}

var row_3Monday = new Array("Monday2", "Monday6", "Monday10")
function check_boxes3Monday() {var state = false;if
(document.taskform.checkall_row3Monday.checked) state = true; for
(y=0; y < row_3Monday.length; y++) { for (i = 0; i <
document.taskform.elements.length; i++) { if
(document.taskform.elements[i].name == row_3Monday[y])
document.taskform.elements[i].checked = state; }; }}

var row_4Monday = new Array("Monday3", "Monday7", "Monday11")
function check_boxes4Monday() {var state = false;if
(document.taskform.checkall_row4Monday.checked) state = true; for
(y=0; y < row_4Monday.length; y++) { for (i = 0; i <
document.taskform.elements.length; i++) { if
(document.taskform.elements[i].name == row_4Monday[y])
document.taskform.elements[i].checked = state; }; }}
--> </script>

<table border=1>
<tr><caption>Monday</caption></tr>
<tr><td>toggle</td><td>0</td><td>1</td><td l>2</td></tr>
<tr><td><input type=checkbox name="checkall_row1Monday"
onClick="check_boxes1Monday(true)"></td>
<td><input type=checkbox name=Monday0></td><td><input type=checkbox
name=Monday4></td>
<td><input type=checkbox name=Monday8></td></tr>
<tr><td><input type=checkbox name="checkall_row2Monday"
onClick="check_boxes2Monday(true)"></td>
<td><input type=checkbox name=Monday1></td><td><input type=checkbox
name=Monday5></td>
<td><input type=checkbox name=Monday9></td></tr>
<tr><td><input type=checkbox name="checkall_row3Monday"
onClick="check_boxes3Monday(true)"></td>
<td><input type=checkbox name=Monday2></td><td><input type=checkbox
name=Monday6></td>
<td><input type=checkbox name=Monday10></td></tr>
<tr><td><input type=checkbox name="checkall_row4Monday"
onClick="check_boxes4Monday(true)"></td>
<td><input type=checkbox name=Monday3></td><td><input type=checkbox
name=Monday7></td>
<td><input type=checkbox name=Monday11></td></tr>
</table>
<script language="JavaScript"> <!--

var row_1Tuesday = new Array("Tuesday0", "Tuesday4", "Tuesday8")
function check_boxes1Tuesday() {var state = false;if
(document.taskform.checkall_row1Tuesday.checked) state = true; for
(y=0; y < row_1Tuesday.length; y++) { for (i = 0; i <
document.taskform.elements.length; i++) { if
(document.taskform.elements[i].name == row_1Tuesday[y])
document.taskform.elements[i].checked = state; }; }}

var row_2Tuesday = new Array("Tuesday1", "Tuesday5", "Tuesday9")
function check_boxes2Tuesday() {var state = false;if
(document.taskform.checkall_row2Tuesday.checked) state = true; for
(y=0; y < row_2Tuesday.length; y++) { for (i = 0; i <
document.taskform.elements.length; i++) { if
(document.taskform.elements[i].name == row_2Tuesday[y])
document.taskform.elements[i].checked = state; }; }}

var row_3Tuesday = new Array("Tuesday2", "Tuesday6", "Tuesday10")
function check_boxes3Tuesday() {var state = false;if
(document.taskform.checkall_row3Tuesday.checked) state = true; for
(y=0; y < row_3Tuesday.length; y++) { for (i = 0; i <
document.taskform.elements.length; i++) { if
(document.taskform.elements[i].name == row_3Tuesday[y])
document.taskform.elements[i].checked = state; }; }}

var row_4Tuesday = new Array("Tuesday3", "Tuesday7", "Tuesday11")
function check_boxes4Tuesday() {var state = false;if
(document.taskform.checkall_row4Tuesday.checked) state = true; for
(y=0; y < row_4Tuesday.length; y++) { for (i = 0; i <
document.taskform.elements.length; i++) { if
(document.taskform.elements[i].name == row_4Tuesday[y])
document.taskform.elements[i].checked = state; }; }}
--> </script>

<table border=1>
<tr><caption>Tuesday</caption></tr>
<tr><td>toggle</td><td>0</td><td>1</td><td l>2</td></tr>
<tr><td><input type=checkbox name="checkall_row1Tuesday"
onClick="check_boxes1Tuesday(true)"></td>
<td><input type=checkbox name=Tuesday0></td><td><input type=checkbox
name=Tuesday4></td>
<td><input type=checkbox name=Tuesday8></td></tr>
<tr><td><input type=checkbox name="checkall_row2Tuesday"
onClick="check_boxes2Tuesday(true)"></td>
<td><input type=checkbox name=Tuesday1></td><td><input type=checkbox
name=Tuesday5></td>
<td><input type=checkbox name=Tuesday9></td></tr>
<tr><td><input type=checkbox name="checkall_row3Tuesday"
onClick="check_boxes3Tuesday(true)"></td>
<td><input type=checkbox name=Tuesday2></td><td><input type=checkbox
name=Tuesday6></td>
<td><input type=checkbox name=Tuesday10></td></tr>
<tr><td><input type=checkbox name="checkall_row4Tuesday"
onClick="check_boxes4Tuesday(true)"></td>
<td><input type=checkbox name=Tuesday3></td><td><input type=checkbox
name=Tuesday7></td>
<td><input type=checkbox name=Tuesday11></td></tr>
</table>
</form>

[Richard Cornford]

Edward wrote:

The below code builds 2 tables 4 rows by 4 cols. All cells have
checkboxes. When checked, the checkboxes in the first column
automatically check the remainder of the check boxes in the same row.

This is working fine for tables of this size. Unfortunately, my app
produces lots of considerably bigger tables and the 'toggle' can take
over a minute to complete!!

I assume this is because for each toggle, the all form elements are
searched through to see if they match.
Worse than that you are re-resolving the reference to the form's -
elements - collection for each and ever property access used.
Is it possible to change this so that a toggle only has to search the
elements of the table it appears in - rather than the whole form?

<snip>

Yes, but as you have a consistent naming convention there is no need.

Overall, you would be hard pressed to create a worse implementation of
this script than you did. Not only is it horrendously inefficient but it
is also so evidently repetitive that it should have been obvious that
considerable simplification could be achieved by appropriate function
design.

Contrast your efforts with this version, for code size and speed:-

<html>
<head>
<title></title>
<script type="text/javascript">
function toggleCheckRow(inpt, name, startNum){
var formEls = inpt.form.elements;
var state = inpt.checked;
for(var c = (startNum+8);c >= startNum;c -= 4){
formEls[name+c].checked = state;
}
}
</script>
</head>
<body>
<form name=taskform action="check_submit.php" method=post>
<table border=1>
<tr><caption>Monday</caption></tr>
<tr><td>toggle</td><td>0</td><td>1</td><td l>2</td></tr>
<tr>
<td><input type=checkbox name="checkall_row1Monday"
onClick="toggleCheckRow(this, 'Monday', 0);"></td>
<td><input type=checkbox name=Monday0></td>
<td><input type=checkbox name=Monday4></td>
<td><input type=checkbox name=Monday8></td>
</tr>
<tr>
<td><input type=checkbox name="checkall_row2Monday"
onClick="toggleCheckRow(this, 'Monday', 1);"></td>
<td><input type=checkbox name=Monday1></td>
<td><input type=checkbox name=Monday5></td>
<td><input type=checkbox name=Monday9></td>
</tr>
<tr>
<td><input type=checkbox name="checkall_row3Monday"
onClick="toggleCheckRow(this, 'Monday', 2);"></td>
<td><input type=checkbox name=Monday2></td>
<td><input type=checkbox name=Monday6></td>
<td><input type=checkbox name=Monday10></td>
</tr>
<tr>
<td><input type=checkbox name="checkall_row4Monday"
onClick="toggleCheckRow(this, 'Monday', 3);"></td>
<td><input type=checkbox name=Monday3></td>
<td><input type=checkbox name=Monday7></td>
<td><input type=checkbox name=Monday11></td>
</tr>
</table>
<table border=1>
<tr><caption>Tuesday</caption></tr>
<tr><td>toggle</td><td>0</td><td>1</td><td l>2</td></tr>
<tr>
<td><input type=checkbox name="checkall_row1Tuesday"
onClick="toggleCheckRow(this, 'Tuesday', 0);"></td>
<td><input type=checkbox name=Tuesday0></td>
<td><input type=checkbox name=Tuesday4></td>
<td><input type=checkbox name=Tuesday8></td>
</tr>
<tr>
<td><input type=checkbox name="checkall_row2Tuesday"
onClick="toggleCheckRow(this, 'Tuesday', 1);"></td>
<td><input type=checkbox name=Tuesday1></td>
<td><input type=checkbox name=Tuesday5></td>
<td><input type=checkbox name=Tuesday9></td>
</tr>
<tr>
<td><input type=checkbox name="checkall_row3Tuesday"
onClick="toggleCheckRow(this, 'Tuesday', 2);"></td>
<td><input type=checkbox name=Tuesday2></td>
<td><input type=checkbox name=Tuesday6></td>
<td><input type=checkbox name=Tuesday10></td></tr>
<tr>
<td><input type=checkbox name="checkall_row4Tuesday"
onClick="toggleCheckRow(this, 'Tuesday', 3);"></td>
<td><input type=checkbox name=Tuesday3></td>
<td><input type=checkbox name=Tuesday7></td>
<td><input type=checkbox name=Tuesday11></td>
</tr>
</table>
</form>
</body>
</html>

Richard.

[mscir]

Edward wrote:

This is working fine for tables of this size. Unfortunately, my app
produces lots of considerably bigger tables and the 'toggle' can take
over a minute to complete!!

<snip>

I used this approach, it works on my
Win98 IE 6, Netscape 7.1, Firefox 0.8:

- use a single generic function
- use a single 2 dimensional array
- send the 1st dimension of the array to the function
(rename checkboxes starting with 0 to match array base element)
- loop through the 2nd dimension of the array only <<<
- reduce lookup time, use: docelements = document.taskform.elements;

Mike
<form name=taskform action=check_submit.php method=post>
<script language="JavaScript">
var row_Monday = new Array(3);
row_Monday[0] = ["Monday0", "Monday4", "Monday8"];
row_Monday[1] = ["Monday1", "Monday5", "Monday9"];
row_Monday[2] = ["Monday2", "Monday6", "Monday10"];
row_Monday[3] = ["Monday3", "Monday7", "Monday11"];

function check_boxes(rownum) {
var docelements = document.taskform.elements;
var state = docelements['checkall_row'+rownum+'Monday'].checked;
for (var i=0; i<3; i++)
docelements[row_Monday[rownum][i]].checked=state;
}
</script>

<table border=1>
<tr><caption>Monday</caption></tr>
<tr>
<td>toggle</td>
<td>0</td>
<td>1</td>
<td l>2</td>
</tr>
<tr>
<td><input type=checkbox name="checkall_row0Monday"
onClick="check_boxes(0)"></td>
<td><input type=checkbox name=Monday0></td>
<td><input type=checkbox name=Monday4></td>
<td><input type=checkbox name=Monday8></td>
</tr>
<tr>
<td><input type=checkbox name="checkall_row1Monday"
onClick="check_boxes(1)"></td>
<td><input type=checkbox name=Monday1></td>
<td><input type=checkbox name=Monday5></td>
<td><input type=checkbox name=Monday9></td>
</tr>
<tr>
<td><input type=checkbox name="checkall_row2Monday"
onClick="check_boxes(2)"></td>
<td><input type=checkbox name=Monday2></td>
<td><input type=checkbox name=Monday6></td>
<td><input type=checkbox name=Monday10></td>
</tr>
<tr>
<td><input type=checkbox name="checkall_row3Monday"
onClick="check_boxes(3)"></td>
<td><input type=checkbox name=Monday3></td>
<td><input type=checkbox name=Monday7></td>
<td><input type=checkbox name=Monday11></td>
</tr>
</table>