我想建立一个表,其中最初的所有单元格是空的,但是如果用户点击一个空单元格,文本将出现在单元格中。这可能使用仅HTML?
<td onclick="this.innerText = 'hello, world'"></td>
请记住,在上点击值实际上是JavaScript的,不是纯粹的HTML。
随着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(例如)只是为了做到这一点 - 不要虽然(jQuery的,MooTools的,下划线等),大魔法图书馆获得的引诱。这是没有或多或少很难做小东西像这样与普通的香草比它与一些奇特的JavaScript库,但库增加了10,000行代码就不需要。
下面是使用只支持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(因为表单说“动作= page2.html”)
不它不是。你可以用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>
这将是更好的,不过,如果你这样做的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>