HTML Tables and JavaScript

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.

Quiz

<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>

Use api.jquery.com/replaceWith/, If you have the plain html code, i can show how to replace! — Eswar Rajesh Pinapala, Jun 20 '12 at 18:12
Btw, is this one of those - take-a-survey-and-get-a-gift scams ? :P — Eswar Rajesh Pinapala, Jun 20 '12 at 18:13
Haha! No not a scam I wouldn't be asking for help on scamming people. It's just a place holder button image I had from an older project. I'm just trying to get the layout and backend correct right now before I replace the text and images. — Tobias, Jun 20 '12 at 18:16

score 2 · Accepted Answer · answered Jun 20 '12 at 18:16

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.

score 1 · Answer 2 · answered Jun 20 '12 at 18:16

What you are talking about is one of the biggest aspects of Javascript, so yes, it is possible.

Javascript makes it possible to manipulate the DOM elements and their styles, so for example if you want hide an element, you just need:

document.getElementById(id).style.display = 'none';

Want to learn Javascript? Start here

score 1 · Answer 3 · answered Jun 20 '12 at 18:17

jQuery makes this easy with methods like replaceWith(), but jQuery is definitely not required.

This is classic DOM manipulation. Here's an example where the text "before" is replaced with after in the div results div.

var node = document.createTextNode( 'After' ) //create a new text node 
var el = document.getElementById( 'result' ) //get existing element
el.innerHTML = ''; //clear inner contents
el.appendChild( node ) //append new text node

HTML Tables and JavaScript

3 Answers3