当前位置: 代码迷 >> Java Web开发 >> 简略功能实现,求解
  详细解决方案

简略功能实现,求解

热度:5   发布时间:2016-04-14 19:06:34.0
简单功能实现,求解。
先上代码,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>&nbsp;</td>
    <td>&nbsp;</td>
    <td id="click" onclick="f_click()">here</td>
    <td>&nbsp;</td>
    <td>&nbsp;</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>


这段脚本放进去就可以
  相关解决方案