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

Discussion in 'Javascript' started by Edward, Apr 15, 2004.

  1. Edward

    Edward Guest

    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.name == row_1Monday[y])
    document.taskform.elements.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.name == row_2Monday[y])
    document.taskform.elements.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.name == row_3Monday[y])
    document.taskform.elements.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.name == row_4Monday[y])
    document.taskform.elements.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.name == row_1Tuesday[y])
    document.taskform.elements.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.name == row_2Tuesday[y])
    document.taskform.elements.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.name == row_3Tuesday[y])
    document.taskform.elements.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.name == row_4Tuesday[y])
    document.taskform.elements.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>
    Edward, Apr 15, 2004
    #1
    1. Advertising

  2. 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.
    Richard Cornford, Apr 15, 2004
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Jukka K. Korpela
    Replies:
    3
    Views:
    774
    Michael Winter
    Mar 6, 2004
  2. Michael Winter
    Replies:
    4
    Views:
    589
    Lasse Reichstein Nielsen
    Mar 6, 2004
  3. Robert
    Replies:
    0
    Views:
    511
    Robert
    Mar 6, 2004
  4. Edward
    Replies:
    1
    Views:
    141
    Lasse Reichstein Nielsen
    Jan 4, 2004
  5. Edward
    Replies:
    0
    Views:
    176
    Edward
    Feb 5, 2004
Loading...

Share This Page