                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JavaScript進階篇

為什么添加的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"
						}
					}

				}
				//?編寫一個函數(shù)，供添加按鈕調用，動態(tài)在表格的最后一行添加子節(jié)點；

			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++;

			}

			//?創(chuàng)建刪除函數(shù)
			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沒有觸發(fā)事件變色

qyqxin

2017-07-24

源自：JavaScript進階篇 9-22

關注問題我要回答

1013

操作

收起

2 回答

我要SSR
2017-07-25

你可以在后面加個onload();讓他在運行一遍

1 回復有任何疑惑可以回復我~

收起回答

Nika_
2017-07-25

新增的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';
??????????};
????????});
????????}