參考大佬的，歡迎大佬持續(xù)優(yōu)化
<!DOCTYPE?html>
<html>
<head>
????<title>?表格練習?</title>
????<meta?http-equiv="Content-Type"?content="text/html;?charset=gbk"?/>
????<style>
????????html,
????????body,
????????div,
????????table,
????????tr,
????????th,
????????td,
????????input?{
????????????margin:?0;
????????????padding:?0;
????????}
????????a?{
????????????text-decoration:?none;
????????????color:?#ff7474;
????????????font-size:?14px;
????????????display:?block;
????????????width:?60px;
????????????margin:?0?auto;
????????}
????????button?{
????????????width:?160px;
????????????line-height:?40px;
????????????text-align:?center;
????????????margin:?0?auto;
????????????display:?block;
????????????background-color:?#ff4081;
????????????color:?#fff;
????????????border:?none;
????????????border-radius:?3px;
????????????outline:?none;
????????}
????????table?{
????????????width:?600px;
????????????margin:?50px?auto;
????????????table-layout:?fixed;
????????????border-collapse:?collapse;
????????????text-align:?center;
????????????line-height:?40px;
????????????border:?1px?solid?#e2e2e2;
????????}
????????tr:nth-child(2n+1)?{
????????????background-color:?#f7f7f7;
????????}
????????table?tr:first-child?{
????????????background-color:?#f7f7f7?!important;
????????}
????????table?.active?{
????????????background-color:?#e0f1ff;
????????}
????????th,
????????td?{
????????????border:1px?solid?#ccc;
????????}
????????tr{
????????????border:1px?solid?#ccc;
????????}
????????th?{
????????????color:?#333;
????????????font-size:?14px;
????????}
????????td?{
????????????color:?#666;
????????????font-size:?14px;
????????}
????</style>
????<script?type="text/javascript">
????????var?changeColor;
????????var?tables;
????????//頁面初始化加載
????????window.onload?=?function?()?{
????????????//?鼠標移動改變背景,可以通過給每行綁定鼠標移上事件和鼠標移除事件來改變所在行背景色。
????????????tables?=?document.querySelector("#table");
????????????changeColor?=?function?()?{
????????????????var?tr1?=?document.getElementsByTagName("tr");
????????????????for?(var?i?=?1;?i?<?tr1.length;?i++)?{
????????????????????tr1[i].onmouseover?=?function?()?{
????????????????????????this.classList.add("active");
????????????????????}
????????????????????tr1[i].onmouseout?=?function?()?{
???????????????????????this.classList.remove("active");
????????????????????}
????????????????}
????????????}
????????????changeColor();
????????}
????????//?編寫一個函數(shù)，供添加按鈕調用，動態(tài)在表格的最后一行添加子節(jié)點；
????????function?add()?{
????????????var?tbody?=?tables.childNodes[1];?//得到tbody節(jié)點
????????????var?trNode?=?document.createElement("tr");?//創(chuàng)建tr節(jié)點
????????????tbody.appendChild(trNode);??//將tr節(jié)點加入tbody
????????????var?num?=?parseInt(Math.random()*10);
????????????trNode.innerHTML?=?'<td>xh00'+num?+?'</td><td>'?+?prompt("請輸入名字")?+?'</td><td?class="del"><a?href="javascript:;"?onclick="removes(this)">刪除</a></td>';
????????????changeColor();
????????}
????????//?創(chuàng)建刪除函數(shù)
????????function?removes(obj)?{
????????????//獲取table子節(jié)點tbody然后在刪除指定節(jié)點
????????????//????console.log(tables.childNodes[1])
????????????tables.childNodes[1].removeChild(obj.parentNode.parentNode);
????????}
????</script>
</head>
<body>
????<table?width="50%"?id="table">
????????<tr>
????????????<th>學號</th>
????????????<th>姓名</th>
????????????<th>操作</th>
????????</tr>
????????<tr>
????????????<td>xh001</td>
????????????<td>王小明</td>
????????????<td><a?href="javascript:;"?onclick="removes(this)">刪除</a></td>
????????????<!--在刪除按鈕上添加點擊事件??-->
????????</tr>
????????<tr>
????????????<td>xh002</td>
????????????<td>劉小芳</td>
????????????<td><a?href="javascript:;"?onclick="removes(this)">刪除</a></td>
????????????<!--在刪除按鈕上添加點擊事件??-->
????????</tr>
????</table>
????<button?type="button"?id="btn"?onclick="add()">添加一行</button>
????<!--在添加按鈕上添加點擊事件-->
</body>
</html>
2020-05-31
啊啊啊