www.webdeveloper.com
Results 1 to 6 of 6

Thread: When is this table populated?

  1. #1
    Join Date
    Aug 2012
    Posts
    5

    When is this table populated?

    Here's a webpage that's giving me trouble (the code is largely borrowed, including the "hasClass" function):


    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    </head>

    <script type="text/javascript" language="JavaScript">
    // this function is needed to work around
    // a bug in IE related to element attributes
    function hasClass(obj) {
    var result = false;
    if (obj.getAttributeNode("class") != null) {
    result = obj.getAttributeNode("class").value;
    }
    return result;
    }

    function traversetable(id) {

    // obtain a reference to the desired table
    // if no such table exists, abort
    var table = document.getElementById(id);
    if (! table) { return; }

    // by definition, tables can have more than one tbody
    // element, so we'll have to get the list of child
    // &lt;tbody&gt;s
    var tbodies = table.getElementsByTagName("tbody");

    // and iterate through them...
    for (var h = 0; h < tbodies.length; h++) {

    // find all the &lt;tr&gt; elements...
    var trs = tbodies[h].getElementsByTagName("tr");

    // ... and iterate through them
    for (var i = 0; i < trs.length; i++) {

    // get all the cells in this row...
    var tds = trs[i].getElementsByTagName("td");

    // and iterate through them...
    for (var j = 0; j < tds.length; j++) {

    var mytd = tds[j];

    document.write(mytd)

    }
    }
    }
    };

    </script>

    <body>
    <table id="mytable" border="1" width="100%">
    <tr>
    <td>some</td>
    <td>words</td>
    <td>here</td>
    </tr>
    </table>

    <script type="text/javascript">
    traversetable ("mytable");
    </script>

    </body>

    </html>


    In this page, I'm trying to write a JavaScript function function traversetable(id) which is intended to take the table "id" and run through all the tds. As presented above, it just issues a "document.write" for each td.

    I've set up a table with one row and three columns and called this function on it. But the table seems to be empty when "traversetable" runs on it. My "document.write(mytd)" just returns "[object]" for each of the three times it is called. These are output immediately after the table is shown in the normal way with the three proper values in it.

    How can I arrange things so that "traversetable" will find the values I am putting in the table? Or can anyone explain the order in which things happen in a webpage with JavaScript like this one?

    Thanks for any insights.

  2. #2
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,268
    At first, do not use document.write in a function. This instruction works only at the opening of the page when the document is open.

    Then tds[j] is effectively an object which contains some (j=0), words (j=1) and here(j=2). Replace your document.write with an alert(tds[j].innerHTML) to see the content of the cells or build a string with something like this
    Code:
    var str;
    for (var j = 0; j < tds.length; j++) str+='|'+tds[j].innerHTML;
    // To display the result in an existing paragraph with an id="rsp"
    document.getElementById('rsp').innerHTML=str.substr(1);
    
    //HTML after the table
    <p id="rsp"></p>

  3. #3
    Join Date
    Aug 2012
    Posts
    5
    Thank you, that was helpful and enabled me to move on to my next problem!

    Here's the new problem webpage:

    <html>

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    </head>

    <script type="text/javascript" language="JavaScript">

    var optsel=0

    // this function is needed to work around
    // a bug in IE related to element attributes
    function hasClass(obj) {
    var result = false;
    if (obj.getAttributeNode("class") != null) {
    result = obj.getAttributeNode("class").value;
    }
    return result;
    }

    function ShowText (optsel) {
    alert ("Starting in ShowText, optsel " + optsel );
    if (optsel == 1) {
    document.getElementById("mydiv").style.display = "none";
    alert ("Hiding text")
    }
    else {
    document.getElementById("mydiv").style.display = "inline";
    alert ("Showing text")
    };
    alert ("Finishing ShowText");
    return true
    };

    function ActOnForm (myform) {
    alert('Selecting');
    for (k=0; k<myform.Rogha.length;k++){
    if (myform.Rogha[k].checked){
    window.optsel = k;
    alert ("In function, optsel " + window.optsel)
    }
    }
    ShowText (window.optsel)
    return true
    };

    </script>

    <body>
    <form onsubmit="return ActOnForm(this)">
    <table>
    <tr><td><input type="radio" value="" name="Rogha" checked />Show</td></tr>
    <tr><td><input type="radio" value="" name="Rogha" />Hide</td></tr>
    <tr><td align="center"><input type="Submit" value="Submit" /></td></tr>
    </table>
    </form>

    <div id="mydiv">Some text to show or hide.</div>

    <script type="text/javascript">
    alert ("optsel is " + optsel)
    \\ ShowText (optsel)
    </script>

    </body>

    </html>


    The page just contains a <div>. I use a <form> to read some user input to control how the <div> is displayed. The <form> has two radio buttons labelled "Show" and "Hide". "Show" is the default.

    Clicking the "Submit" button of the <form> executes the function ActOnForm, to put 0 or 1 in a global variable "optsel", depending to which radio button is selected. "optsel" is initialised to 0.

    "optsel" is used by a script function ShowText to set the "style.display" of the <div>. I have two candidate places to call ShowText: one is where you see it in the source above, at the end of ActOnForm; the other is in an unnamed script at the very end of the page, where it is commented out in the above.

    We can use the alerts to trace what happens.

    When the page is displayed at first, the alert in the unnamed script shows that "optsel" is 0, and the div is shown.

    Now click the "Hide" radio button and submit. ActOnForm is executed, with two alerts: the first just confirms "Selecting", and the second that "optsel" has the value 1.

    The next thing we see from the alerts is that ShowText has started (with optsel = 1), that the <div> is being hidden (and indeed it is gone), and that ShowText is finishing. Looking good! But not for long. As soon as I clear that last alert, the radio button reverts to "Show" and the <div> reappears.

    This is with the call to ShowText positioned in ActOnForm, as in the source above. If I reposition the call to ShowText to the end of the page, the only difference is that ShowText has optsel = 0, and the <div> is therefore shown throughout.

    What I want to do is make permanent the situation which I had brought about before the page refreshed itself. It there a way to do that?

    Thanks again for any help.

  4. #4
    Join Date
    Aug 2012
    Posts
    5
    I've found the following solution by experimentation. I have no idea why this happens, perhaps someone can explain.

    Modify my previous page as follows.

    Remove <form onsubmit="return ActOnForm(this)">

    Remove </form>

    Replace <input type="Submit" value="Submit" />

    by <input type="Button" onclick="ActOnForm()" value="Submit" />

    In ActOnForm,
    Replace (myform) in the function header by ()
    Replace myform. by window. twice elsewhere

    It seems that the <form onsubmit= > has something to do with making the page revert, whereas <input type="Button" onclick= > avoids this.

  5. #5
    Join Date
    Aug 2012
    Posts
    5
    Hmm my solution works in IE7, but not it seems in FireFox or Google Chrome, where clicking an input button not in a form seems to do nothing. So I'm still looking for a browser-independent solution.

  6. #6
    Join Date
    Aug 2012
    Posts
    5
    Back to my message of yesterday, the last one that had a full webpage source on it.

    In function ActOnForm, change "return true" to "return false".

    According to what I see on the web, that is enough to prevent the page refreshing. So far, it seems to work on all browsers.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles