Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Swap Complete Html table

    Hi,

    I'm trying to figure out how to swap out an entire table in my HTML page. I actually have four different tables. Ideally only one would be displayed when a user selects which table instance they want from a drop down list.

    I have started to create the page on my site at http://www.the-house-plans-guide.com...spancalculator

    It currently has one table displayed and the drop down list above (but nothing as yet is inspecting the drop down list). The other three possible tables are very similar, just for different wood species.

    I initially thought I could use innerHTML to do this but I am having a hard time with that.

    Is there a simple elegant way to swap these elements out?!

    Please help!

    Susan
    Last edited by Maguire; 06-27-2012 at 04:43 PM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Sure. Just hide all but one of the tables.

    Unless you NEED to dynamically change the content of the tables, there is no reason to do ugly things like remove child nodes, add new ones, etc.

    You are so close!

    Code:
        <select name="species" id="species">
           <option value="DFL">Douglas Fir or Larch</option>
           <option value="HF">Hemlock or Fir</option>
           <option value="SPF">Spruce, Pine or Fir</option>
           <option value="NS">Northern Species</option>
        </select>
    ...
        <table id="DFL" style="display: block;"...>...</table>
        <table id="HF"  style="display: none;"...> ... </table>
        <table id="SPF"  style="display: none;"...> ... </table>
        <table id="NS"  style="display: none;"...> ... </table>
    ...
    <script type="text/javascript">
    document.getElementById("species").onchange = 
        function() {
            var opts = this.options;
            for ( var i = 0; i < opts.length; ++i )
            {
                var tblID = opts[i].value;
                document.getElementById(tblID).style.display = ( opts[i].selected ? "block" : "none" );
            }
        };
    </script>
    </body>
    </html>
    Notice that the table id's must match, in spelling AND CASE (upper/lower) with the values in your <select>.

    **********

    The code in that [b]function MM_changeProp()[/code] is designed for the browser in the year 1999. 80% of the code in there is no longer needed.

    HINT: NEVER NEVER NEVER trust any JavaScript code generated by DreamWeaver (or, as it SHOULD be named, "NightmareStalker").
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Maguire (06-27-2012)

  • #3
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts

    adding to my question...

    can I do this with a simple switch statement? If so, how would I implement the HTML part?

  • #4
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post

    ....
    **********

    The code in that [b]function MM_changeProp()[/code] is designed for the browser in the year 1999. 80% of the code in there is no longer needed.
    Wonderful. Thank you! And yes after taking a good look at just what was in that MMchangeProp function I was wondering how old it was.

    I have been canabalizing other bits of code to create the dynamic table that I have and really, it's terribly implemented. I haven't done any kind of coding for 15 years (unless you call HTML coding!).

    Ignore the switch comment I made. I posted that before I saw your response.

    Gratefully,
    Susan


  •  

    Posting Permissions

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