Question

Is it possible to delete data in a table and replace it with new data using JavaScript? For instance you have text in a table and below that text you have a button that says “take quiz” and upon clicking the button the text goes away and the quiz appears. Then, after taking the quiz and clicking the submit button the quiz goes away and a thank you message appears. I am trying to figure out a way to keep the user on the same page. I have attached a screenshot to hopefully help explain what I am talking about.

<table width="1280" height="1024" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
    <tr>
      <td colspan="3">
        <img src="images/asdfasd.gif" width="1280" height="239" alt=""></td>
      </tr>
    <tr>
      <td rowspan="2">
        <img src="images/asdf02.gif" width="110" height="785" alt=""></td>
      <td><div id="vsp_copy"><table width="1045" border="0">
  <tr>
    <td height="543" ><h2>VIDEO: THE REAL COST </h2>
    <iframe width="600" height="360" src="http://www.youtube.comdfas?rel=0" frameborder="0" allowfullscreen></iframe></td>
    <td><h2>sdfasdf</h2>
      <h2>asdfa</h2>
      <h2>asdf</h2>
      <p>asdf </p>
      <p>asdf</p>
      <p>asdf </p>
      <p>asdf</p>
      <p>adfsdf</p>
      <p><img src="images/asdfas.gif" width="357" height="37"></p></td>
  </tr>
</table> 

Answer 1

Yes it is possible to do so. A brief example:

<div id="welcome">Welcome to quiz <button id="begin">Start</button></div>
<div id="quiz">
   Question1:.... <br/>
   Question2:.... <br/>
   <button id="submit">Submit</button>
</div>
<div id="thanks">Thank you for taking the quiz</div>

Your css will look something like:

#quiz, #thanks { display: none; }

Your jquery:

$("#begin").click(function(){
    $("#quiz").show();
    $("#welcome").hide();    
});
$("#submit").click(function(){
    $("#thanks").show();
    $("#quiz").hide();    
});

This is just a simple example, but what I am trying to communicate here is how you can manipulate the DOM to get your desired effect.