給大家看看
<!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?_table?=?document.getElementById("table")
????????????var?_trs?=?_table.children[0].children
????????????for?(var?i?=?0;?i?<?_trs.length;?i++)?{
????????????????_trs[i].onmouseover?=?function?()?{
????????????????????changeBg(this);
????????????????????this.style.backgroundColor?=?"#ccc"
????????????????}
????????????????_trs[i].onmouseout?=?function?()?{
????????????????????this.style.backgroundColor?=?"#fff"
????????????????}
????????????}
????????}
????????//?編寫一個函數，供添加按鈕調用，動態在表格的最后一行添加子節點；
????????function?addStu()?{
????????????var?_ramdom?=?Math.round(Math.random()?*?20);?//?隨機學號
????????????var?_table?=?document.getElementById("table")
????????????var?_tbody?=?_table.children[0];
????????????var?_tds?=?_tbody.children[0].children;
????????????var?_tr?=?document.createElement("tr");
????????????var?_a?=?document.createElement("a");
????????????_a.href?=?"javascript:;"
????????????_a.onclick?=?function?suibian()?{
????????????????delStu(this);
????????????}
????????????_a.innerText?=?"刪除"
????????????var?tdContent?=?["小明",?_ramdom,?_a]
????????????for?(var?i?=?0;?i?<?_tds.length;?i++)?{
????????????????var?_td?=?document.createElement("td");
????????????????_td.append(tdContent[i]);
????????????????_tr.appendChild(_td);
????????????}
????????????_tbody.appendChild(_tr);
????????????console.log(_tr);
????????}
????????//?創建刪除函數
????????function?delStu(ele)?{
????????????var?_table?=?document.getElementById("table")
????????????var?_tbody?=?_table.children[0];
????????????var?_trs?=?_tbody.children;
????????????_tbody.removeChild(ele.parentNode.parentNode);
????????}
????</script>
</head>
<body>
????<table?border="1"?width="50%"?id="table">
????????<tr?onmouseover="changeBg()">
????????????<th>學號</th>
????????????<th>姓名</th>
????????????<th>操作</th>
????????</tr>
????????<tr>
????????????<td>xh001</td>
????????????<td>王小明</td>
????????????<td><a?href="javascript:;"?onclick="delStu(this)">刪除</a></td>
????????????<!--在刪除按鈕上添加點擊事件??-->
????????</tr>
????????<tr>
????????????<td>xh002</td>
????????????<td>劉小芳</td>
????????????<td><a?href="javascript:;"?onclick="delStu(this)">刪除</a></td>
????????????<!--在刪除按鈕上添加點擊事件??-->
????????</tr>
????</table>
????<input?type="button"?value="添加一行"?onclick="addStu()"?/>
????<!--在添加按鈕上添加點擊事件??-->
</body>
</html>
