功能實現沒什么問題,只不過。。。進行多次刪除操作的時候console控制臺會報錯,然而還是能正常刪除該行。。。解決方案是把deleteLine函數從deleteList函數中移出來。。??墒?。。。為什么移出來進行刪除操作就不報錯了呢。。。。VM2307:51 Uncaught TypeError: Cannot read property 'removeChild' of null提示錯誤在this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);這行。<!DOCTYPE?html>
<html>
?<head>
??<title>?new?document?</title>??
??<meta?http-equiv="Content-Type"?content="text/html;?charset=gbk"/>???
?</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:;"?>刪除</a></td>???<!--在刪除按鈕上添加點擊事件??-->
???</tr>
???<tr>
<td>xh002</td>
<td>劉小芳</td>
<td><a?href="javascript:;"?>刪除</a></td>???<!--在刪除按鈕上添加點擊事件??-->
???</tr>??
???</table>
???<input?type="button"?value="添加一行"??id="add"/>???<!--在添加按鈕上添加點擊事件??-->
???????
???????<script>
???????????var?add?=?document.getElementById("add");
???????????var?tbodyEle?=?document.querySelector("tbody");
???????????var?allTr?=?document.querySelectorAll("tr");
???????????var?trLen?=?allTr.length;
???????????var?allA?=?document.querySelectorAll("a");
???????????var?aLen?=?allA.length;
???????????
???????????function?addLine?(){
???????????????var?trEle?=?document.createElement("tr");
???????????????var?tdOne?=?document.createElement("td");
???????????????tdOne.innerHTML?=?"xh00"?+?(aLen?+?1);
???????????????var?tdTwo?=?document.createElement("td");
???????????????tdTwo.innerHTML?=?"逗比"?+?(aLen?+?1)?+?"號";
???????????????var?tdThr?=?document.createElement("td");
???????????????tdThr.innerHTML?=?"<a?href='javascript:;'?>刪除</a>";
???????????????trEle.appendChild(tdOne);
???????????????trEle.appendChild(tdTwo);
???????????????trEle.appendChild(tdThr);
???????????????tbodyEle.appendChild(trEle);
???????????????
???????????????//每次添加一行更新tr和a節點。并為新添加的行綁定hover和delete事件
???????????????allTr?=?document.querySelectorAll("tr");
???????????????allA?=?document.querySelectorAll("a");
???????????????trLen++;?aLen++;
???????????????console.log(allTr);console.log(allA);console.log(trLen);
???????????????hover();
???????????????deleteList();
???????????????
????????????}
???????????add.addEventListener("click",?addLine);
???????????
???????????
???????????
???????????function?hover(){
???????????????for(var?i?=?0;i?<?trLen;?i++){
???????????????????allTr[i].addEventListener("mouseover",?function(){this.style.backgroundColor?=?"#f2f2f2";});
???????????????????allTr[i].addEventListener("mouseout",?function(){this.style.backgroundColor?=?"#fff";});
???????????????}
???????????}
???????????hover();
???????????
???????????
???????????
???????????function?deleteList(){
???????????????
???????????????
??????????????function?deleteLine(){
????????????????//每次刪除一行更新tr和a節點。
????????????????this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
????????????????allTr?=?document.querySelectorAll("tr");
????????????????allA?=?document.querySelectorAll("a");
????????????????aLen--;trLen--;
????????????????console.log(allTr);console.log(allA);console.log(trLen);
??????????????}
???????????????
??????????????for(var?i?=?0;?i?<?aLen;?i++){?????
??????????????????allA[i].addEventListener("click",?deleteLine);
??????????????}
???????????}
???????????deleteList();
???????????
???????????
???????</script>
?</body>
</html>
刪除行的時候console報錯問題。
QuoVadis
2016-04-24 11:07:50