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
– Eswar Rajesh Pinapala, Commented Jun 20, 2012 at 18:12
Btw, is this one of those - take-a-survey-and-get-a-gift scams ? :P — Eswar Rajesh Pinapala
– Eswar Rajesh Pinapala, Commented Jun 20, 2012 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
– Tobias, Commented Jun 20, 2012 at 18:16

Charles · Accepted Answer · 2012-06-20 18:16:46Z

2

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.

answered Jun 20, 2012 at 18:16

Charles

6482 gold badges9 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Soufiane Hassou · Accepted Answer · 2012-06-20 18:16:13Z

1

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

answered Jun 20, 2012 at 18:16

Soufiane Hassou

17.8k2 gold badges42 silver badges76 bronze badges

Comments

buley · Accepted Answer · 2012-06-20 18:17:14Z

1

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

answered Jun 20, 2012 at 18:17

buley

29.6k18 gold badges90 silver badges108 bronze badges

Collectives™ on Stack Overflow

HTML Tables and JavaScript

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related