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

Discussion in 'Javascript' started by Edward, Feb 5, 2004.

  1. Edward

    Edward Guest

    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 ()
    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 ()
    Subject: Re: Document Object Model - table instead of form?? - slow
    processing in large form!




    (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 -
    DHTML Death Colors:
    <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
    'Faith without judgement merely degrades the spirit divine.'
     
    Edward, Feb 5, 2004
    #1
    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:
    775
    Michael Winter
    Mar 6, 2004
  2. Michael Winter
    Replies:
    4
    Views:
    590
    Lasse Reichstein Nielsen
    Mar 6, 2004
  3. Robert
    Replies:
    0
    Views:
    511
    Robert
    Mar 6, 2004
  4. Edward
    Replies:
    1
    Views:
    145
    Lasse Reichstein Nielsen
    Jan 4, 2004
  5. Edward
    Replies:
    1
    Views:
    128
    Richard Cornford
    Apr 15, 2004
Loading...

Share This Page