                        課程
                    
                        /前端開發
                        
                            /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(){
?????//?鼠標移動改變背景,可以通過給每行綁定鼠標移上事件和鼠標移除事件來改變所在行背景色。
????????
changecolor();
?
}
?????
????function?changecolor(){
????????var?trs?=?document.getElementsByTagName("tr");
????????for(var?i=1;i<trs.length;i++){
????????????trs[i].setAttribute("onmouseover","addcolor(this)");
????????????trs[i].setAttribute("onmouseout","deletecolor(this)");
????????}
????}
????
????function?addcolor(obj){
????????obj.style.backgroundColor="#f2f2f2";
????}
????function?deletecolor(obj){
????????obj.style.backgroundColor="#fff";
????}
????
?????
??????//?編寫一個函數，供添加按鈕調用，動態在表格的最后一行添加子節點；
?????function?addrow(){
?????????var?id?=?prompt("請輸入學號","xh");
?????????var?name?=?prompt("請輸入姓名","xxx");
?????????var?table?=?document.getElementById("table");
?????????var?newtr?=?document.createElement("tr");
?????????var?newth1?=?document.createElement("th");
?????????newth1.innerHTML?=?id;
?????????var?newth2?=?document.createElement("th");
?????????newth2.innerHTML?=?name;
?????????var?newth3?=?document.createElement("th");
?????????var?newa?=?document.createElement("a");
?????????newa.innerHTML="刪除";
?????????newa.setAttribute("href","javascript:;");
?????????newa.setAttribute("onclick","deleterow(this)");
?????????newth3.appendChild(newa);
?????????newtr.appendChild(newth1);
?????????newtr.appendChild(newth2);
?????????newtr.appendChild(newth3);
?????????table.appendChild(newtr);
?????????changecolor();
?????}
???
????
?????//?創建刪除函數
?????function?deleterow(obj){
?????????var?tmp?=?obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode);
?????}
??</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="deleterow(this)">刪除</a></td>???<!--在刪除按鈕上添加點擊事件??-->
???</tr>
???<tr>
<td>xh002</td>
<td>劉小芳</td>
<td><a?href="javascript:;"?onclick="deleterow(this)">刪除</a></td>???<!--在刪除按鈕上添加點擊事件??-->
???</tr>??
???</table>
???<input?type="button"?value="添加一行"?onclick="addrow()"?/>???<!--在添加按鈕上添加點擊事件??-->
?</body>
</html>