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

只寫了添加，刪除。。。。。刪除哪兒錯了，幫看下，非常謝謝啦?。。?/h1>
<!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(){
?? ???? function remove(obj){
?? ??? ?? var tr = obj.parentNode.parentNode;
?? ?????? tr.parentNode.removeChild(tr);
?? ??? ?}
?? ? }
?? ?
?? ?? var num = 2;
?? ?? function add(){
?? ?? var input = document.getElementsByTagName("input")[0];
?? ?? var tab = document.getElementById("table");
?? ?? var tr = document.createElement("tr");
????? var td1 = document.createElement("td");
?? ?? var td2 = document.createElement("td");
?? ?? var td3 = document.createElement("td");
?? ??? ???? num++;
?? ??? ??? ?td1.innerHTML = "xh00"+ num;
?? ??? ??? ?td2.innerHTML = num+"個同學";
?? ??? ??? ?td3.innerHTML = '<a href="javascript:;" onclick = "remove(this)">刪除</a>' ;
?? ??? ??? ?tr.appendChild(td1);
?? ??? ??? ?tr.appendChild(td2);
?? ??? ??? ?tr.appendChild(td3);
?? ??? ??? ?tab.appendChild(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 = "remove(this)">刪除</a></td>?? 
?? ??? </tr>

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

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

慕碼人0911192

2015-12-19

源自：JavaScript進階篇 9-22

關注問題我要回答

649

操作

收起

2 回答

LLeo小浩回答被采納 +3 積分
2015-12-19

<!DOCTYPE?html>
<html>
?<head>
??<meta?charset="utf-8">
??<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="#"?onclick?=?"remove_(this)">刪除</a></td>???<!--在刪除按鈕上添加點擊事件??-->
???????</tr>

???????<tr>
????????<td>xh002</td>
????????<td>劉小芳</td>
????????<td><a?href="#"?onclick?=?"remove_(this)">刪除</a></td>???<!--在刪除按鈕上添加點擊事件??-->
???????</tr>??

???????</table>
???????<input?type="button"?value="添加一行"?onclick="add()"/>???<!--在添加按鈕上添加點擊事件??-->
???????<script?type="text/javascript">?
????????var?num?=?2;
????????function?add(){
??????????var?input?=?document.getElementsByTagName("input")[0],?
??????????????tab?=?document.getElementById("table"),
??????????????tr?=?document.createElement("tr"),
??????????????td1?=?document.createElement("td"),
??????????????td2?=?document.createElement("td"),
??????????????td3?=?document.createElement("td");
??????????num++;
??????????td1.innerHTML?=?"xh00"+?num;
??????????td2.innerHTML?=?num+"個同學";
??????????td3.innerHTML?=?'<a?href="javascript:;"?onclick?=?"remove(this)">刪除</a>'?;
??????????tr.appendChild(td1);
??????????tr.appendChild(td2);
??????????tr.appendChild(td3);?
??????????tab.appendChild(tr);??
????????}

????????function?remove_(obj){
??????????var?tr?=?obj.parentNode.parentNode;
??????????tr.parentNode.removeChild(tr);?
????????}
????????</script>
?</body>
</html>

原因是 remove 是一個DOM 原生的函數名，作用是刪除元素節點。你在 a 標簽上直接綁定這個函數就是刪除這個節點。?