Hi there,

The function below is called onchange from a drop down list. Each time the user selects an option a table with data is created. What i cannot figure out is how to replace or remove the existing table when the user chooses an option for a second time. In other words, instead of creating and displaying the tables the one below the other i just want to remove the existing one.
With the help of a few people i added the if condition at the beginning of the function, but it doesn't do what it was supposed to do. No results are returned.

function displayDetails(){
if(document.getElementById("newtable")){
var oldNode = document.getElementById("newtable");
oldNode.document.removeNode(oldNode);
}

var table = document.createElement("table");
table.id="newtable";
var tbody = document.createElement("tbody");
var tr = document.createElement("tr");
var td = document.createElement("td");

var idx = document.getElementById("trackid").selectedIndex;
var value = document.getElementById("trackid").options[idx].value;
for(var i=0; i<js_array.length; i++){
if(js_array[i] == value){
var data = document.createTextNode(js_array[i]);
td.appendChild(data);
tr.appendChild(td);
tbody.appendChild(tr);
table.appendChild(tbody);
}
}
document.getElementById('showtable').appendChild(t able);
}

Any thoughts would be very much appreciated. Thanks a lot.

This line:

    for(var i=0; i<js_array.length; i++){

mentions js_array, but it is never defined anywhere. its length will thus always be 0.
It would be better if you posted the complete script, or at least everything that the function uses.


A possible answer to your problem: The if block that checks for the existence of an existing table and then deletes it. it only deletes the <table> tags, and not the entire table. (<tr><td> and text nodes)
I think you'll need to write a recursive function that deletes all of the tables descendants. (so the tables children, the childrens children and so on).

Thanks for the reply.

when you say "recursive function", do you mean something like that:

function removeTable(){
while(table.childNodes.length > 0){
table.removeChild(table.firstChild);
}
}

Hold that thought, i just discovered an error in the script that might do the trick.

replace:

oldNode.document.removeNode(oldNode);

with:

oldNode.parentNode.removeChild(oldNode);

removeNode isn't a javascript function Firefox told me
If that doesn't work i already have the recursive function ready for you.


EDIT: I just tested it and it seems to work just fine with only that simple linechange

still not working.
actually, i noticed that when i change the id in the getElementById the respond changes. For instance, if the id is the <table> tag's id it doesn't return anything. Whereas if the id is the <tbody> tag's id it returns the data table but only when i choose an option from the drop down for the first time.

Thanks once more.
I really appreciate your help.

Hmm, in the original script the tbody node didn't get an id attribute. Did you change that? Else it wouln't make any sense.

In my test script i created a div with id 'showtable'. The script place the new table inside whatever element had id 'showtable'. What element are you using for this?

Spotted another little bug:

     document.getElementById('showtable').appendChild(t  able);

should be:

     document.getElementById('showtable').appendChild(table);

If that doesn't work, i'll post my modified script for you (tested in FF and IE6)

yes, i added an id for the tbody node as well.

this is where i place the table:
<TABLE>
<TR>
<TD width="" align="center" valign="top" id="showtable"></TD>
</TR>
</TABLE>

In your script the new table replaces the old one?

I cannot see what might go wrong, everything seems okay.
I changed the little bug you spotted but still nothing.

Thanks a lot.

I am posting the select box. You might spott something that i can't.

var select1 = document.createElement('select');

select1.setAttribute("name", "patNo");
select1.setAttribute("id", "patNo");
var option1 = new Option('Please choose');
option1.setAttribute("selected", "selected");
option1.setAttribute("value", "option1");
select1.appendChild(option1);
for (var i=0; i<js_array.length; i++){
var option2 = document.createElement('option');
option2.value=js_array[i];
option2.appendChild(document.createTextNode(js_arr ay[i]));
select1.appendChild(option2);
}
document.getElementById('dropdown1').appendChild(s elect1);

Except for the obvious spaces in

        option2.appendChild(document.createTextNode(js_arr  ay[i]));
AND
    document.getElementById('dropdown1').appendChild(s  elect1);

Although i'm not sure what kind of data is in js_array. As long as it's only strings you should be fine.


Yeah, this script is called on change of a selectbox, reads the value of the selected item and then places the value in a single cell table:
value

Copy this code and save it in an empty html document.
Adjust it back to your original where appropriate.

<html>
    <head>
        <script type="text/javascript">
            function displayDetails(){
          if(document.getElementById("newtable")){
              var oldNode = document.getElementById("newtable");
              oldNode.parentNode.removeChild(oldNode);    
          }
      
          var table = document.createElement("table");
          table.id="newtable";
          var tbody = document.createElement("tbody");
          var tr = document.createElement("tr");
          var td = document.createElement("td");
      
          var idx = document.getElementById("trackid").selectedIndex;
          var Svalue = document.getElementById("trackid").options[idx].value;
          var Sdata = document.createTextNode(Svalue);
          td.appendChild(Sdata);
          tr.appendChild(td);
          tbody.appendChild(tr);
          table.appendChild(tbody);
          
          document.getElementById('showtable').appendChild(table);
      }
    </script>
  </head>
    <body>
        <div id="showtable"></div>
        
        <form name="test" action="post">
            <select name="selectbox" id="trackid" onchange="displayDetails();">
                <option value="test1">test1
                <option value="test2">test2
                <option value="test3">test3
                <option value="test4">test4
                <option value="test5">test5
                <option value="test6">test6
            </select>
        </form>
    
    </body>
</html>

It WORKS!!!

this line made the difference: oldNode.parentNode.removeChild(oldNode);

Thanks a lot for your time and your effort.
Your help was really valuable.

You're very welcome!

I'm pleased it works. This was an interesting problem as i haven't used the DOM to modify HTML much before, so i was quote pleased to be able to help out anyway

A book that has been (and still very much is) very valuable to me is

Javascript: the definive guide
by David Flanagan, published by O'Reilly.

If you're looking to develop more Javascript scripts, this book is great reference material do keep open next to your keyboard. That and Firefox's very helpfull error messages.