先上代码,jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>组队</title>
<style type="text/css">
td{
background:#00FF00;
width:20%;
}
</style>
</head>
<body>
<table width="1067" height="408">
<tr>
<td> </td>
<td> </td>
<td id="click" onclick="f_click()">here</td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
<script type="text/javascript">
function f_click() {
document.getElementById("click").innerText = "username";
document.getElementById("click").style.backgroundColor="red";
}
</script>
</html>
基本已经实现点击单元格,可以自动输入username。
但是,我想要每个单元格都有这个功能,要怎么做?不必要每个单元格都用不同的id,再加上相同的方法吧?求解
------解决思路----------------------
楼主好题!想了好久,我的方法:使用JQuery遍历所有td,加上onclick属性
下面是源代码,亲测可运行
<!--
http://bbs.csdn.net/topics/391027916
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
<title>组队</title>
<style type="text/css">
td
{
background: #00FF00;
width: 20%;
}
</style>
</head>
<body>
<table width="1067" height="408">
<tr>
<td>
ss
</td>
<td>
</td>
<td id="click" onclick="f_click()">
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</body>
<script type="text/javascript">
//使用JQuery的each属性遍历所有td
$("td").each(function () {
//使用attr增加onclick属性
$(this).attr("onclick", "f_click(this);");
});
</script>
<script type="text/javascript">
//e:被点击的对象
function f_click(e) {
e.innerText = "username";
e.style.backgroundColor = "red";
}
</script>
</html>
效果图
另外,楼主既然是用jsp,那么可以使用jsp标签进行循环添加标签啊
------解决思路----------------------
<script type="text/javascript">
function cellClick() {
var tds = document.getElementsByTagName("td");
for(var i=0;i<tds.length;i++){
var td = tds[i];
td.onclick = f_click;
}
}
function f_click() {
this.innerText = "username";
this.style.backgroundColor="red";
}
onload = cellClick();
</script>
这段脚本放进去就可以