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

關(guān)于刪除按鈕，為什么只能刪除新增的，確不能刪除原有的兩條數(shù)據(jù)

<!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(){
???????????????? ?
???? // 鼠標(biāo)移動改變背景,可以通過給每行綁定鼠標(biāo)移上事件和鼠標(biāo)移除事件來改變所在行背景色。
???????? var trs = document.getElementsByTagName("tr");
?? ??? ? for(var i = 0; i < trs.length;i++){
?? ??? ????? backGd(trs[i]);
?? ??? ? }
?? ? }
??? ?
???? function backGd(obj){
???????? obj.onmouseover = function(){
???????????? this.style.backgroundColor = "#f2f2f2";
???????? }
???????? obj.onmouseout = function(){
???????????? this.style.backgroundColor = "#fff";
???????? }
???? }
??? ?
???? function add(){
??????? var table = document.getElementById("table");
??????? var tr = document.createElement("tr");
??????? var td0 = document.createElement("td");
??????? var td1 = document.createElement("td");
??????? var td2 = document.createElement("td");
??????? var trlength = document.getElementsByTagName("tr").length;
??????? td0.innerHTML = "xh" + getNum(trlength);
??????? td1.innerHTML = "同學(xué)"+trlength;
??????? td2.innerHTML = "<a href='javascript:;' onclick='delRow(this)'>刪除</a>";
??????? backGd(tr);
??????? tr.appendChild(td0);
??????? tr.appendChild(td1);
??????? tr.appendChild(td2);
??????? table.appendChild(tr);
???? }
??? ?
???? function getNum(num){
???????? if(num < 10){
???????????? return "00"+num;
???????? }else if(num < 100){
???????????? return "0"+num;
???????? }else{
???????????? return num;
???????? }
???? }?? ??? ?
? ??? ?
???? // 創(chuàng)建刪除函數(shù)
???? function delRow(obj){
???????? var parents = obj.parentNode.parentNode;
???????? var table = document.getElementById("table");
???????? table.removeChild(parents);
???? }

? </script>
?</head>
?<body>
?? ??? <table border="1" width="50%" id="table">
?? ??? <tr>
?? ??? ?<th>學(xué)號</th>
?? ??? ?<th>姓名</th>
?? ??? ?<th>操作</th>
?? ??? </tr> ?

?? ??? <tr>
?? ??? ?<td>xh001</td>
?? ??? ?<td>王小明</td>
?? ??? ?<td><a href="javascript:;" onclick="delRow(this)">刪除</a></td>?? 
?? ??? </tr>

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

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