为了账号安全,请及时绑定邮箱和手机立即绑定

为什么我的事件代码无效

5820ba9500014c1b05000231.jpg

5820ba950001389105000348.jpg

<!DOCTYPE html>
<html>
<head>
   <title> new document </title>
   <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
   <script type="text/javascript">
       window.onload = function() {
           var mytr = document.getElementsByTagName("tr");
           alert(mytr.length);
           for (var i = 0; i < mytr.length; i++) {
               // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
               mytr[i].onmouseover = function () {
                   mytr[i].style.backgroundColor = "f2f2f2";
               }
               mytr[i].onmouseout = function () {
                   mytr[i].style.backgroundColor = "fff";
               }
           }
       }
         

       // 编写一个函数,供添加按钮调用,动态在表格的最后一行添加子节点;
       function add() {

           var tableobj=document.getElementById("table");
           //获得tableobj子节点的个数
           var tableobjChildnum=tableobj.childNodes.length;
           //增加tr.th节点
           var tr1=document.createElement("tr");
           var tdXh=document.createElement("td");
           var tdName=document.createElement("td");
           var tddel=document.createElement("td");
           //为tr.th节点中的HTML赋值
           var xh=prompt("请输入学号","");
           //判断输入的值是否为正整数
           var a;
           if(a=(xh!=null&&xh>0&&!isNaN(xh))){
               tdXh.innerHTML="xh"+xh;
               tr1.appendChild(tdXh);
           }else {
               alert("请重新输入,输入值必须为正整数");
           }
           //判断输入的值是否为汉字
           var name=prompt("请输入姓名","");
           var reg = new RegExp("[\\u4E00-\\u9FFF]+","g");
           var b;
           if(b=reg.test(name)){
               tdName.innerHTML=name;
               tr1.appendChild(tdName);
           }else{
               alert("请重新输入,输入值必须为汉字");
           }
           tddel.innerHTML="<a href='javascript:;' onclick='del(this)' >删除</a>";
           //将tr.th节点加入到table表格中的最后一行
           //判断是否输入学号和姓名
           if(a==true&&b==true){
               tr1.appendChild(tddel);
               tableobj.appendChild(tr1);
           }
       }

       // 创建删除函数
       function del(obj) {
           var thisobj = obj.parentNode.parentNode;
           thisobj.parentNode.removeChild(thisobj);
       }


   </script>
</head>
<body>
<table  border="1" width="50%" id="table">
   <tr>
       <th>学号</th>
       <th>姓名</th>
       <th>操作</th>
   </tr>

   <tr>
       <td>xh001</td>
       <td>王小明</td>
       <td><a href="javascript:;" onclick="del(this)">删除</a></td>   <!--在删除按钮上添加点击事件  -->
   </tr>

   <tr>
       <td>xh002</td>
       <td>刘小芳</td>
       <td><a href="javascript:;" onclick="del(this)" >删除</a></td>   <!--在删除按钮上添加点击事件  -->
   </tr>

</table>
<input type="button" onclick="add()" value="添加一行"  />   <!--在添加按钮上添加点击事件  -->
</body>
</html>




求帮助

正在回答

3 回答

注释说明

mytr[i].onmouseover = function () {
   this.style.backgroundColor = "#f2f2f2";  //用this,指当前触发事件,这里的i已经是定值了;颜色加#
}
mytr[i].onmouseout = function () {
   this.style.backgroundColor = "#fff";   //同上
}


0 回复 有任何疑惑可以回复我~
#1

qq_黑泽明_0 提问者

能麻烦具体解释一下当前的this是什么情况么?
2016-11-08 回复 有任何疑惑可以回复我~
#2

qq_黑泽明_0 提问者

我在下面加了个代码.有空可以看一下
2016-11-08 回复 有任何疑惑可以回复我~
http://img1.sycdn.imooc.com//5821dc1200015db613340322.jpg这样也是可以的
0 回复 有任何疑惑可以回复我~

http://img1.sycdn.imooc.com//58213b310001a2c814800580.jpg或者换句话说我跟这个代码有什么区别,我的参数进去不也是跟他一样么?

0 回复 有任何疑惑可以回复我~
#1

stone310

把上面的和这个问题一起回答了,都是一个道理; 首先在页面加载时候,执行for循环,如果写成上面的格式,里面的事件是不会加载的,只有等到触发的时候再去加载执行,因此执行的时候i已经循环完毕,是个定值; 下面这种写法,当页面加载到for循环,这时候已经将每一个i的值作为参数传递给了bgcChange,此时函数里面已经绑定了每一个i值对应的元素的mouse事件,因此当事件触发时,会弹出不同的i
2016-11-08 回复 有任何疑惑可以回复我~
#2

qq_黑泽明_0 提问者 回复 stone310

没用闭包.....
2016-11-08 回复 有任何疑惑可以回复我~
#3

qq_黑泽明_0 提问者 回复 qq_黑泽明_0 提问者

用了this也可以
2016-11-08 回复 有任何疑惑可以回复我~
#4

qq_黑泽明_0 提问者 回复 stone310

http://blog.csdn.net/xiaozji/article/details/43530563这个解释一级棒!
2016-11-08 回复 有任何疑惑可以回复我~
查看1条回复

举报

0/150
提交
取消

为什么我的事件代码无效

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信