Question

我正在尝试设置一个表，其中最初所有单元格都是空的，但是如果用户单击一个空单元格，则文本将出现在单元格中。这只能使用html吗？

Answer 1

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

请记住，点击价值实际上是javascript，而不是纯粹的HTML。

Answer 2

使用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（例如）来完成这个。使用简单的vanilla javascript做一些像这样的小东西比使用一些花哨的库更难或更难，但是库增加了10,000行你不需要的代码。

Answer 3

这是一个使用仅 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”）

Answer 4

不，不是。不过，你可以用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/

制作一个空白的html表格单元格可点击并返回文本

4 个答案: