-1

最初はすべてのセルが空であるテーブルを設定しようとしていますが、ユーザーが空のセルをクリックすると、そのセルにテキストが表示されます。これはhtmlのみを使用して可能ですか？

4

4 に答える 4

0 
<td onclick="this.innerText = 'hello, world'"></td>

クリック時の値は実際にはjavascriptであり、純粋なhtmlではないことに注意してください。

于 2012-06-21T22:35:51.073 に答える
0

HTMLとCSSを使用すると、この動作を概算できますが、マウスを押している間だけです。

これがすべてのブラウザで機能するかどうかはわかりません。

<table>
    <tr>
        <td>Click the cell:</td>
        <td class="revealer ">
            <div class="revealable">
                MAGIC!!
            </div>
        </td>
    </tr>
</table>

active魔法は疑似セレクターによって（乱用？）起こります：

td.revealer .revealable {
 display:none;   
}
td.revealer:active .revealable {
 display:block;   
}

効果は、マウスが下がっている間だけ持続します。マウスを上にすると、要素は「アクティブ」ではなくなります

試してみてください：http：//jsfiddle.net/GRMule/awksn/

そうは言っても...これのユースケースはかなり狭いです。一般に、ページで何らかの動的アクションを実行する場合は、簡単なJavaScriptを追加することを検討する必要があります。ただし、大きな魔法のライブラリ（jQuery、mootools、アンダースコアなど）に惑わされないでください。実行しているのが本当に単純なもののほんの一握りである場合は、これを実現するためだけにjQueryを追加しないでください。 。プレーンなバニラJavaScriptを使用する場合と比べて、このような小さなことを行うのは多少難しいことではありませんが、ライブラリには不要な10,000行のコードが追加されます。

于 2012-06-21T22:39:43.793 に答える
0

HTMLと一部のCSSのみを使用して機能するソリューションは次のとおりです。

メインページ：

<html>
<body>
<table border=1>
<tr><td><iframe src="page1.html"></iframe></td><td><iframe src="page1.html"></iframe></td></tr>
<tr><td><iframe src="page1.html"></iframe></td><td><iframe src="page1.html"></iframe></td></tr>
</table>
</body>
</html>

page1.html：

<html>
<body>
<form method=post action="page2.html">
<input type="submit" value="" style="width: 100%; height: 100%; margin: 0px; padding: 0px; background: white; border: none;">
</form>
</body>
</html>

page2.html：

<html>
<body>
Hello!
</body>
</html>

仕組み：
メインページに表が表示されます。各セルにはインラインフレームが含まれています。
インラインフレームのコンテンツは、送信ボタンを含むフォームです。送信ボタンにはテキストがなく、CSSを使用してスタイルが設定されています：白い背景、境界線、余白、パディングなし、幅100％、高さ100％。このように、それは見えず、テーブルセル全体を使用します。
テーブルセルをクリックすると、実際には送信ボタンをクリックします。フォームが送信され、page2.htmlが表示されます（フォームに「action = page2.html」と表示されているため）

于 2012-06-21T22:53:58.523 に答える
-1

いいえそうではありません。ただし、JavaScriptを使用してこれを行うことはできます。

<table>
 <tr>
  <td onclick="this.innerHTML = 'Data';"></td>
  <td onclick="this.innerHTML = 'Data';"></td>
  <td onclick="this.innerHTML = 'Data';"></td>
 </tr>
 <tr>
  <td onclick="this.innerHTML = 'Data';"></td>
  <td onclick="this.innerHTML = 'Data';"></td>
  <td onclick="this.innerHTML = 'Data';"></td>
 </tr>
</table>

http://jsfiddle.net/b3hXs/

ただし、jQueryを使用してこれを行った方がはるかに優れているため、これを各セルに適用する必要はありません。jQuery.comでjQueryをダウンロードして、次のようにページに埋め込むことができます。

<html>
 <head>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
   $(document).ready(function(){
    $('td').click(function(){
     $(this).html('Data');
    });
   });
  </script>
 </head>
 <body>
  <table>
   <tr>
    <td></td>
    <td></td>
    <td></td>
   </tr>
   <tr>
    <td></td>
    <td></td>
    <td></td>
   </tr>
  </table>
 </body>
</html>

http://jsfiddle.net/M4RZs/

于 2012-06-21T22:37:40.957 に答える