问答详情
源自：9-22 编程练习

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

<!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没有触发事件变色


提问者：qyqxin 2017-07-24 17:11

个回答

  • 我要SSR
    2017-07-25 16:31:07

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

    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';
          };
        });
        }


    1