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の最大の側面の1つなので、そうです、それは可能です。

Javascriptを使用すると、DOM要素とそのスタイルを操作できます。たとえば、要素を非表示にする場合は、次のものが必要です。

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

Javascriptを学びたいですか？ここから始める

于 2012-06-20T18:16:13.317 に答える
1

jQuery は のようなメソッドでこれを簡単にしますがreplaceWith()、jQuery は絶対に必要ではありません。

これは古典的な DOM 操作です。これは、div divでテキスト「before」が置き換えられる例です。afterresults

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 に答える