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

只寫了添加，刪除。。。。。刪除哪兒錯(cuò)了，幫看下，非常謝謝啦?。?！

<!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+"個(gè)同學(xué)";
?? ??? ??? ?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>學(xué)號(hào)</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進(jìn)階篇 9-22

關(guān)注問題我要回答

639

操作

收起

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>學(xué)號(hào)</th>
????????<th>姓名</th>
????????<th>操作</th>
???????</tr>??

???????<tr>
????????<td>xh001</td>
????????<td>王小明</td>
????????<td><a?href="#"?onclick?=?"remove_(this)">刪除</a></td>???<!--在刪除按鈕上添加點(diǎn)擊事件??-->
???????</tr>

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

???????</table>
???????<input?type="button"?value="添加一行"?onclick="add()"/>???<!--在添加按鈕上添加點(diǎn)擊事件??-->
???????<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+"個(gè)同學(xué)";
??????????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 是一個(gè)DOM 原生的函數(shù)名，作用是刪除元素節(jié)點(diǎn)。你在 a 標(biāo)簽上直接綁定這個(gè)函數(shù)就是刪除這個(gè)節(jié)點(diǎn)。?

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

慕碼人0911192 提問者

非常感謝！

2015-12-22 回復(fù) 有任何疑惑可以回復(fù)我~

#2

慕碼人0911192 提問者回復(fù) 慕碼人0911192 提問者

現(xiàn)在才知道你說的什么意思！原諒我這么笨。。。

2015-12-22 回復(fù) 有任何疑惑可以回復(fù)我~

#3

really4you

td3.innerHTML = '<a href="javascript:;" onclick = "remove(this)">刪除</a>' ; 請(qǐng)問這里的單引號(hào)和雙引號(hào)有特別需要注意的地方嗎？我試過了，如果都用雙引號(hào)是沒辦法運(yùn)行的，不是說雙引號(hào)和單引號(hào)都沒什么區(qū)別嗎？謝謝！

2016-01-19 回復(fù) 有任何疑惑可以回復(fù)我~