                        課程
                    
                        /前端開發
                        
                            /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 tr=document.getElementsByTagName("tr");
????? for (var i=0;i<tr.length;i++){
????????? tr[i].setAttribute("onmouseover","javascript:this.style.backgroundColor='#f2f2f2'");
????????? tr[i].setAttribute("onmouseout","javascript:this.style.backgroundColor='#fff'")
????? }
?? ? }
??? ?
????? // 編寫一個函數，供添加按鈕調用，動態在表格的最后一行添加子節點；
???? function addrow(){
???????? var table=document.getElementById("table");
???????? var newtr=document.createElement("tr");
???????? var newid=document.createElement("td");
???????? var newname=document.createElement("td");
???????? var newope=document.createElement("td");
???????? var newa=document.createElement("a");
???????? newid.innerHTML=prompt("input id","");
???????? newname.innerHTML=prompt("input name","")
???????? newa.setAttribute("href","javascript:void(0));");
???????? newa.setAttribute("onclick","deleterow(this)");
???????? newa.innerHTML="刪除";
???????? newope.appendChild(newa);
???????? newtr.appendChild(newid);
???????? newtr.appendChild(newname);
???????? newtr.appendChild(newope);
???????? table.appendChild(newtr);
???????? window.onload();
???? }
???? // 創建刪除函數
???? function deleterow(delnode){
???????? var thisrow=delnode.parentNode.parentNode;
???????? var par=thisrow.parentNode;
???????? var nodelist=par.childNodes;
???????? for (var i=0;i<nodelist.length;i++)
???????? {
??????????? if (nodelist[i].nodeType=="1")
??????????? {
??????????????? if (nodelist[i].childNodes[1].innerHTML == thisrow.childNodes[1].innerHTML)
??????????????? par.removeChild(nodelist[i]);
??????????? }
???????? }
???? }
?

? </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:void(0));" onclick="deleterow(this)">刪除</a></td>?? 
?? ??? </tr>

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

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

慕絲4883087

2019-02-15

源自：JavaScript進階篇 9-22

關注問題我要回答

916

操作

收起

3 回答

慕萊塢9076050
2019-03-18

麻煩能解釋一下這段嗎？
? ?// 創建刪除函數?
???? function deleterow(delnode){
???????? var thisrow=delnode.parentNode.parentNode;
???????? var par=thisrow.parentNode;
???????? var nodelist=par.childNodes;
???????? for (var i=0;i<nodelist.length;i++)
???????? {
??????????? if (nodelist[i].nodeType=="1")
??????????? {
??????????????? if (nodelist[i].childNodes[1].innerHTML == thisrow.childNodes[1].innerHTML)
??????????????? par.removeChild(nodelist[i]);
??????????? }
???????? }
???? }
??