View Full Version : Resolved Swap Complete Html table

06-26-2012, 11:50 PM

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/joist-span-tables-with-script.html#joistspancalculator

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!


Old Pedant
06-27-2012, 12:58 AM
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!

<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>
<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" );

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").

06-27-2012, 01:03 AM
can I do this with a simple switch statement? If so, how would I implement the HTML part?

06-27-2012, 01:10 AM

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.