Trying to add/remove a table row

[masteroleary]

The code below removes the contents of the row 'extra' and adds them again when the form select element 'station' changes. Because I am only removing a td and not the tr there is extra space. How would you modify this to remove and add the tr tag instead?

 

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

var topicfield;
function sibshop(object)
{
var div1 = document.getElementById('extra');
if(object.value == 'Sibshop')
{
	div1.innerHTML = topicfield;
}
else
{
	topicfield = div1.innerHTML;
	div1.innerHTML = '';
}
}

//-->
</script>

<table id="formtable" name="formtable" width="100%" cellspacing="10" class="box">
  <tr>
    <td><h2> Children participating in Sibshop </h2></td>
  </tr>
  <tr>
    <td>Name
      <input name="name" type="text" id="name" size="30" maxlength="30" />
        
      DOB
      <input name="bday" type="text" id="bday" value="00/00/00" size="5" maxlength="8" /></td>
  </tr>
  <tr>
    <td>Age
      <input name="age" type="text" id="age" size="4" maxlength="2" />
        
      Grade
      <input name="grade" type="text" id="grade" size="4" maxlength="2" />
         
      <select name="gender" id="gender">
        <option value="Male" selected="selected">Male</option>
        <option value="Female">Female</option>
      </select>
        
      <select name="station" id="station" onChange="sibshop(this);">
        <option value="Sibshop">Sibshop</option>
        <option value="Childcare">Childcare</option>
      </select></td>
  </tr>
  <tr id="extra" name="extra">
    <td>Sibshop Topic You Would Like Discussed<br />
      <input name="topic" type="text" size="70" maxlength="60" /></td>
  </tr>
  <tr>
    <td> Disability/Illness <br />
      <input name="disability" type="text" id="disability" size="70" maxlength="70" /></td>
  </tr>
  <tr>
    <td valign="top">Special Needs/ Notes<br />
      <textarea name="notes" cols="53" rows="3"></textarea></td>
  </tr>
</table>

[masteroleary]

Ok guys, I really need help here. I put this new code together but it doesn't work. Can someone please help and tell me what is incorrect? ???

 

<script language="JavaScript" type="text/javascript">
<!--
var rowtr = document.createElement('tr');
var rowtd = document.createElement('td');
var innerhtml =  document.createTextNode('Sibshop Topic You Would Like Discussed<br /><input name="topic" type="text" size="70" maxlength="60" />');
rowtr.setAttribute('id', 'extra');
rowtr.appendChild(rowtd);
rowtd.appendChild(innerhtml);

function sibshop(what)
{
var table = document.getElementById('formtable');
alert(table);
if (what.value == 'Sibshop')
{
	insertBefore(rowtr, table.childNodes[3]);
}
else
{
	row = document.getElementById('extra');
	table.removeChild(row);
}
}

//-->
</script>

<table id="formtable" name="formtable" width="100%" cellspacing="10" class="box">
  <tr>
    <td><h2> Children participating in Sibshop </h2></td>
  </tr>
  <tr>
    <td>Name
      <input name="name" type="text" id="name" size="30" maxlength="30" />
        
      DOB
      <input name="bday" type="text" id="bday" value="00/00/00" size="5" maxlength="8" /></td>
  </tr>
  <tr>
    <td>Age
      <input name="age" type="text" id="age" size="4" maxlength="2" />
        
      Grade
      <input name="grade" type="text" id="grade" size="4" maxlength="2" />
         
      <select name="gender" id="gender">
        <option value="Male" selected="selected">Male</option>
        <option value="Female">Female</option>
      </select>
        
      <select name="station" id="station" onChange="sibshop(this);">
        <option value="Sibshop">Sibshop</option>
        <option value="Childcare">Childcare</option>
      </select></td>
  </tr>

  <tr>
    <td> Disability/Illness <br />
      <input name="disability" type="text" id="disability" size="70" maxlength="70" /></td>
  </tr>
  <tr>
    <td valign="top">Special Needs/ Notes<br />
      <textarea name="notes" cols="53" rows="3"></textarea></td>
  </tr>
</table>