                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /JavaScript進階篇

我的刪除函數沒有用為什么

<!DOCTYPE html>
<html>
?<head>
? <title> new document </title>?
? <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>??
? <script type="text/javascript">
?
????? window.onload = function(){
?????????????????
???? // 鼠標移動改變背景,可以通過給每行綁定鼠標移上事件和鼠標移除事件來改變所在行背景色。
???
???????? var td=document.getElementsByTagName("td");
???????? for(var i=0;i<td.length;i++){
???????????? td[i].onmouseover=function(){
???????????????? this.style.backgroundColor="#f2f2f2";
???????????????? }
????????????????? td[i].onmouseout=function(){
???????????????? this.style.backgroundColor="#fff";
???????????????? }
???????? }
??
????
?
? }
????
????? // 編寫一個函數，供添加按鈕調用，動態在表格的最后一行添加子節點；
???? function add(){
????????
????
????????? var a1=document.createElement("td");
????????? var a2=document.createElement("td");
????????? var a3=document.createElement("td");
????????? var aa=document.createElement("a");
????????? var a=document.createElement("tr");
????????? var table=document.getElementsByTagName("table")[0];
????????? a1.innerHTML="xh00"+parseInt(table.childNodes.length+1);
????????? a2.innerHTML=table.childNodes.length+1+"號";
????????? aa.innerHTML="刪除";
????????? aa.href="javascript:delet();";
????????? a3.appendChild(aa);
????????? a.appendChild(a1);
????????? a.appendChild(a2);
????????? a.appendChild(a3);
????????? table.appendChild(a);
????????? //alert("table");
????????
???? }
??? ??
?? ?
???? // 創建刪除函數
???? function delet(obj){
???????? var tr=obj.parentNode.parentNode;
???????? tr.parentNode.removeChild(tr);
???? }

? </script>
?</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:delet(this);" >刪除</a></td>?? 
??? </tr>

??? <tr>
??<td>xh002</td>
??<td>劉小芳</td>
??<td><a href="javascript:delet(this);" >刪除</a></td>?? 
??? </tr>?

??? </table>
??? <input type="button" value="添加一行" onclick="add()" />?? 
?</body>
</html>

qq_棄子_0

2016-11-16

源自：JavaScript進階篇 9-22

關注問題我要回答

1006

操作

收起

2 回答

qq_一個人樂的小兔子_03311008 回答被采納 +3 積分
2016-11-24

你的刪除點擊事件書寫有誤，href為鏈接地址的填寫，你需要自己加一個點擊事件onclick，你可以去了解一下href和onclick書寫點擊事件的不同，把你的代碼改成href="javascript:void(0)" onclick="delet(this)"的格式就行了

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

收起回答

我不是管家
2016-11-16

你需要綁定點擊事件，a標簽的href="javascript:delet(this);并不能執行js的delet函數

<!DOCTYPE?html>
<html>
?<head>
??<title>?new?document?</title>??
??<meta?http-equiv="Content-Type"?content="text/html;?charset=gbk"/>???
??<script?type="text/javascript">?
??
??????window.onload?=?function(){
??????????????????
?????//?鼠標移動改變背景,可以通過給每行綁定鼠標移上事件和鼠標移除事件來改變所在行背景色。
????
?????????var?td=document.getElementsByTagName("td");
?????????for(var?i=0;i<td.length;i++){
?????????????td[i].onmouseover=function(){?
?????????????????this.style.backgroundColor="#f2f2f2";
?????????????????}
??????????????????td[i].onmouseout=function(){?
?????????????????this.style.backgroundColor="#fff";
?????????????????}
?????????}
??
?????
??
??}
?????
??????//?編寫一個函數，供添加按鈕調用，動態在表格的最后一行添加子節點；
?????function?add(){
?????????
?????
??????????var?a1=document.createElement("td");
??????????var?a2=document.createElement("td");
??????????var?a3=document.createElement("td");
??????????var?aa=document.createElement("a");
??????????var?a=document.createElement("tr");
??????????var?table=document.getElementsByTagName("table")[0];
??????????a1.innerHTML="xh00"+parseInt(table.childNodes.length+1);
??????????a2.innerHTML=table.childNodes.length+1+"號";
??????????aa.innerHTML="刪除";
??????????aa.href="javascript:delet();";
??????????a3.appendChild(aa);
??????????a.appendChild(a1);
??????????a.appendChild(a2);
??????????a.appendChild(a3);
??????????table.appendChild(a);
??????????//alert("table");
?????????
?????}
??????
?????
?????//?創建刪除函數
?????function?delet(obj){
?????????var?tr=obj.parentNode.parentNode;
?????????alert(tr)
?????????tr.parentNode.removeChild(tr);
?????}

??</script>?
?</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="delet(this);">刪除</a></td>???<!--在刪除按鈕上添加點擊事件??-->
????</tr>
????<tr>
??<td>xh002</td>
??<td>劉小芳</td>
??<td><a?href="javascript:"?onclick="delet(this);">刪除</a></td>???<!--在刪除按鈕上添加點擊事件??-->
????</tr>?
????</table>
????<input?type="button"?value="添加一行"?onclick="add()"?/>???<!--在添加按鈕上添加點擊事件??-->
?</body>
</html>