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

雖然很丑，但總算是完成了，不容易啊

<!DOCTYPE html>

<html>

? ? .hang {

? ? ? ? background-color: #f2f2f2;

? ? }

</style>

<head>

? ? <title> new document </title>

? ? <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

? ? <script type="text/javascript">

? ? ? ? window.onload = function() {

? ? ? ? ? ? changeColor();

? ? ? ? ? ? deleteTable();

? ? ? ? }

? ? ? ? //加載兩個函數(shù)，分別是改變背景顏色的、給刪除按鈕加事件的

? ? ? ? function changeColor() {

? ? ? ? ? ? var hang = document.getElementsByTagName("tr"); //獲取所有行，是個數(shù)組

? ? ? ? ? ? for (var i = 1; i < hang.length; i++) { //從1開始是避掉標(biāo)題行

? ? ? ? ? ? ? ? hang[i].onmousemove = function() { //給每行添加鼠標(biāo)監(jiān)聽事件

? ? ? ? ? ? ? ? ? ? this.classList.add("hang"); //css設(shè)置好的樣式

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? hang[i].onmouseout = function() {

? ? ? ? ? ? ? ? ? ? this.classList.remove("hang");

? ? ? ? ? ? ? ? };

? ? ? ? ? ? }

? ? ? ? ? ? // 鼠標(biāo)移動改變背景,可以通過給每行綁定鼠標(biāo)移上事件和鼠標(biāo)移除事件來改變所在行背景色。

? ? ? ? }

? ? ? ? // 編寫一個函數(shù)，供添加按鈕調(diào)用，動態(tài)在表格的最后一行添加子節(jié)點；

? ? ? ? function add() {

? ? ? ? ? ? var message = prompt("請輸入您的學(xué)號！", "xh"); //一個對話框，輸入學(xué)號，輸入框默認(rèn)值是xh

? ? ? ? ? ? var name = prompt("請輸入您的姓名！"); //輸入姓名的對話框

? ? ? ? ? ? var tab = document.getElementById("table"); //獲取表格元素

? ? ? ? ? ? var tr1 = document.createElement("tr"); //新建一個行

? ? ? ? ? ? var td1 = document.createElement("td"); //新建列1

? ? ? ? ? ? var td2 = document.createElement("td"); //新建列2

? ? ? ? ? ? var td3 = document.createElement("td"); //新建列3

? ? ? ? ? ? var tda = document.createElement("a"); //新建列3里面的a標(biāo)簽

? ? ? ? ? ? tab.appendChild(tr1); //把行添加到表格

? ? ? ? ? ? tr1.appendChild(td1); //把列1添加到表格

? ? ? ? ? ? tr1.appendChild(td2);

? ? ? ? ? ? tr1.appendChild(td3);

? ? ? ? ? ? td3.appendChild(tda); //把a標(biāo)簽添加到列3

? ? ? ? ? ? td1.innerHTML = message; //把對話框獲取的學(xué)號給列1

? ? ? ? ? ? td2.innerHTML = name; //把姓名給列2

? ? ? ? ? ? tda.innerHTML = "刪除";

? ? ? ? ? ? tda.href = "javascript:;";

? ? ? ? ? ? changeColor(); //新加的一行同時調(diào)用改背景色和刪除按鈕的函數(shù)

? ? ? ? ? ? deleteTable();

? ? ? ? }

? ? ? ? // 創(chuàng)建刪除函數(shù)

? ? ? ? function deleteTable() {

? ? ? ? ? ? var del1 = document.getElementsByTagName("a"); //獲取所有a標(biāo)簽

? ? ? ? ? ? for (var i = 0; i < del1.length; i++) {

? ? ? ? ? ? ? ? del1[i].onclick = function() { //每一個a標(biāo)簽添加點擊事件

? ? ? ? ? ? ? ? ? ? this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); //這個a標(biāo)簽的父親（td）的父親（tr）的父親（即table）.刪除子對象（a的父親的父親即tr）

? ? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? }

? ? </script>

</head>

<body>

? ? <table border="1" width="50%" id="table">

? ? ? ? <tr>

? ? ? ? ? ? <th>學(xué)號</th>

? ? ? ? ? ? <th>姓名</th>

? ? ? ? ? ? <th>操作</th>

? ? ? ? </tr>