1

是否可以使用 JavaScript 删除表中的数据并用新数据替换它？例如，您在表格中有文本，在该文本下方有一个显示“参加测验”的按钮，单击该按钮后，文本消失并出现测验。然后，在完成测验并单击提交按钮后，测验就会消失，并且会出现一条感谢消息。我正在尝试找出一种让用户保持在同一页面上的方法。我附上了一个截图，希望能帮助解释我在说什么。

测验

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

3 回答 3

2

是的，可以这样做。一个简单的例子：

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

你的 CSS 看起来像：

#quiz, #thanks { display: none; }

你的jQuery：

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

这只是一个简单的例子，但我在这里试图传达的是如何操纵 DOM 以获得所需的效果。

于 2012-06-20T18:16:46.197 回答
1

您所说的是 Javascript 的最大方面之一，所以是的，这是可能的。

Javascript 使得操作 DOM 元素及其样式成为可能，例如，如果你想隐藏一个元素，你只需要：

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

想学习 Javascript？从这里开始

于 2012-06-20T18:16:13.317 回答
1

jQuery 使用类似的方法使这变得简单replaceWith()，但绝对不需要 jQuery。

这是经典的 DOM 操作。这是一个示例after，其中将 div div中的文本“之前”替换为results。

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 
​
于 2012-06-20T18:17:14.970 回答