-1

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

4

4 回答 4

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 回答
0 
<td onclick="this.innerText = 'hello, world'"></td>

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

于 2012-06-21T22:35:51.073 回答
-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 回答