为什么添加的tr没有变色？？-慕课网

为什么添加的tr没有变色？？

来源：9-22 编程练习

qyqxin

2017-07-24 17:11

<!DOCTYPE html>
<html>

	<head>
		<title> new document </title>
		<meta charset="utf-8" />
		<script type="text/javascript">
			var num = 3
			var tr = document.getElementsByTagName("tr");

			window.onload = function() {

					// 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。

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

				}
				// 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；

			function add() {
				var tb = document.getElementById("table");
				var newtr = document.createElement("tr");
				var newtd1 = document.createElement("td");
				var newtd2 = document.createElement("td");
				var del = document.createElement("td");
				newtd1.innerHTML = "xh00" + num;

				var p = prompt("请输入你的姓名");
				if(p != null && p != "") {
					tb.appendChild(newtr);
					newtr.appendChild(newtd1);
					newtr.appendChild(newtd2);
					newtd2.innerHTML = p;
					del.innerHTML = "<a href='javascript:;' onclick='del(this)' >删除</a>";
					newtr.appendChild(del);

				} else {

					alert("请输入名字")
				}

				num++;

			}

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

			}
		</script>
		<style type="text/css">
			#table {
				background-color: #fff;
			}
		</style>
	</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" value="添加一行" onclick="add()" />
		<!--在添加按钮上添加点击事件  -->
	</body>

</html>
//添加后的tr没有触发事件变色

写回答关注

2回答

我要SSR

2017-07-25 16:31:07

你可以在后面加个onload();让他在运行一遍

0 1

Nika_: 2017-07-25 10:57:05

新增的tr并没有绑定事件，可以通过事件代理来绑定达到新增的tr也可以绑定事件的效果，建议在tr的父级元素上绑定。

     window.onload = function(){
     //事件代理
        var tbody = document.getElementById('table').getElementsByTagName('tbody')[0];
        tbody.addEventListener('mouseover',function(e){
          if (e.target && e.target.nodeName.toUpperCase() == 'TD') {
            e.target.parentNode.style.backgroundColor='#f2f2f2';
          };
        });
      
        tbody.addEventListener('mouseout',function(e){
          if (e.target && e.target.nodeName.toUpperCase() == 'TD') {
            e.target.parentNode.style.backgroundColor='#fff';
          };
        });
        }

2 1

Nika_ 回复qyqxin

我刚看了下点赞最多的代码，你是按照那个写的？他的代码是在add（）函数中增加了事件绑定，调用了他自己写的事件绑定函数（ bgcChange(tr[i]);），将元素添加到页面后，再为所有的tr重新绑定了事件，所以新增的元素会有效果。

2017-07-25 11:25:56

共 2 条回复 >

JavaScript进阶篇

本课程从如何插入JS代码开始，带您进入网页动态交互世界

468061 学习 · 21891 问题

查看课程

相似问题

为什么点击按钮添加的行鼠标移入没有变色？

回答 3