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

9-22的編程練習，無法刪除，添加

<!DOCTYPE html>
<html>
?<head>
? <title> new document </title> ?
? <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>? ?
? <script type="text/javascript">
???? var num=0;
????? window.onload = function(){
??????? var y=document.getElementsByTagName(tr);????????? ?
???? // 鼠標移動改變背景,可以通過給每行綁定鼠標移上事件和鼠標移除事件來改變所在行背景色。
???? ?
??????? num= y.length-1;
??????? for(var i=0;i<y.length;i++)
??????? {
??????????? changecolor(y[i]);
??????? }
?? ??? ?function changecolor(obj){
?? ??? ?? obj.mouseover=function(){obj.style.backgroundColor="#f2f2f2";}
????????? obj.mouseout=function(){obj.style.backgroundColor="#fff";}
?? ??? ?}
??? ?
?? ?
?? ? }
??? ?
????? // 編寫一個函數(shù)，供添加按鈕調用，動態(tài)在表格的最后一行添加子節(jié)點；
???? function addRow()
???? {
???????? num++;
???????? var a = document.getElementById("table");
???????? var newRow=document.createElement("tr");
???????? newRow.innerHTML='<td>'+'xh00'+num+'</td>'+'<td>'+'第'+num+'個人'+'</td>'+'<td><a href=javascript:;? onclick="delRow(this)">刪除</a></td>';
???????? a.appendChild(newRow);
?????? }
?????? ?
??????? ?
???? }
?? ??? ??? ?
? ??? ?
???? // 創(chuàng)建刪除函數(shù)
??? function del(obj){
??????? var x=obj.parentNode.parentNode.parentNode;
???????? var tr=obj.parentNode.parentNode;
???????? x.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="del(this)" >刪除</a></td>?? 
?? ??? </tr>

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

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