请大神帮忙修改下这个js

qingwadaxia_1 2018-05-28 05:00:28
<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</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="shan(this)">删除</a></td> <!--在删除按钮上添加点击事件 -->
</tr>

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

</table>
<input type="button" value="添加一行" id="dj"/> <!--在添加按钮上添加点击事件 -->

<script type="text/javascript">


var table = document.getElementById("table");
var tr=document.getElementsByTagName("tr");
var dj = document.getElementById("dj");


//鼠标移入变色和移出清除变色

for (var i=1;i<tr.length;i++)
{
tr[i].onmouseover = function(){
this.style.background = "#f2f2f2";
}

tr[i].onmouseout = function(){
this.style.background = "";
}
}


//点击添加tr
dj.onclick = function(){
var cjtr = document.createElement("tr");
var cjtd1 = document.createElement("td");
var cjtd2 = document.createElement("td");
var cjtd3 = document.createElement("td");
var cjwb1 = document.createTextNode("xh003");
var cjwb2 = document.createTextNode("何三三");
cjtd3.innerHTML = '<a href="javascript:;" onclick="shan(this)">删除</a>';

cjtd1.appendChild(cjwb1);
cjtd2.appendChild(cjwb2);

cjtr.appendChild(cjtd1);
cjtr.appendChild(cjtd2);
cjtr.appendChild(cjtd3);

table.appendChild(cjtr);
}

//点击删除
function shan(c){
var sc = c.parentNode.parentNode;
sc.parentNode.removeChild(sc);

}

</script>
</body>
</html>

上面代码中:

点击添加一行可以正常多出一行tr,但是鼠标移入却没有变色效果了,麻烦大神帮忙修改下 就这个问题
...全文
374 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
Fsmecx 2018-06-15
  • 打赏
  • 举报
回复
引用 4 楼 qhf503 的回复:
使用css不是很好吗,为什么要用js? tr:hover { background-color: #f2f2f2; }
可能人家是作业要求用js
qingwadaxia_1 2018-05-29
  • 打赏
  • 举报
回复
引用 3 楼 lishizx 的回复:
1、你的问题在于,一开始就用for循环进行遍历元素,对已存在的tr标签进行绑定样式。 2、所以,当for执行完后,你再次点击新增的时候,这个for就无法捕捉到新增的节点 3、解决方法就是讲这个鼠标移动变色事件放入一个function, 4、初始化的时候调用、新的元素的时候重新执行一次。查看代码中hovers函数
谢谢您,新增之后不能选中变色的原理我是知道的,但是却不知道怎么改,现在总算解决了
qhf503 2018-05-29
  • 打赏
  • 举报
回复
使用css不是很好吗,为什么要用js? tr:hover { background-color: #f2f2f2; }
Fsmecx 2018-05-28
  • 打赏
  • 举报
回复
1、你的问题在于,一开始就用for循环进行遍历元素,对已存在的tr标签进行绑定样式。
2、所以,当for执行完后,你再次点击新增的时候,这个for就无法捕捉到新增的节点
3、解决方法就是讲这个鼠标移动变色事件放入一个function,
4、初始化的时候调用、新的元素的时候重新执行一次。查看代码中hovers函数
Fsmecx 2018-05-28
  • 打赏
  • 举报
回复
<!DOCTYPE html> <html> <head> <title> new document </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> </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="shan(this)">删除</a></td> <!--在删除按钮上添加点击事件 --> </tr> <tr> <td>xh002</td> <td>刘小芳</td> <td><a href="javascript:;" onclick="shan(this)">删除</a></td> <!--在删除按钮上添加点击事件 --> </tr> </table> <input type="button" value="添加一行" id="dj"/> <!--在添加按钮上添加点击事件 --> <script type="text/javascript"> var table = document.getElementById("table"); var tr=document.getElementsByTagName("tr"); var dj = document.getElementById("dj"); //鼠标移入变色和移出清除变色 function hovers(){ for (var i=1;i<tr.length;i++) { tr[i].onmouseover = function(){ this.style.background = "#f2f2f2"; } tr[i].onmouseout = function(){ this.style.background = ""; } } };hovers(); //点击添加tr dj.onclick = function(){ var cjtr = document.createElement("tr"); var cjtd1 = document.createElement("td"); var cjtd2 = document.createElement("td"); var cjtd3 = document.createElement("td"); var cjwb1 = document.createTextNode("xh003"); var cjwb2 = document.createTextNode("何三三"); cjtd3.innerHTML = '<a href="javascript:;" onclick="shan(this)">删除</a>'; cjtd1.appendChild(cjwb1); cjtd2.appendChild(cjwb2); cjtr.appendChild(cjtd1); cjtr.appendChild(cjtd2); cjtr.appendChild(cjtd3); table.appendChild(cjtr); hovers(); } //点击删除 function shan(c){ var sc = c.parentNode.parentNode; sc.parentNode.removeChild(sc); } </script> </body> </html>
天际的海浪 2018-05-28
  • 打赏
  • 举报
回复
新建的tr元素没有绑定onmouseover和onmouseout事件,要对新建的元素单独再绑定下事件。 或者用css tr:hover { background-color: #f2f2f2; }

87,901

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧