<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>Title</title>
????<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:?#2196F3;
????????????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:?none;
????????}
????????th?{
????????????color:?#333;
????????????font-size:?14px;
????????}
????????td?{
????????????color:?#666;
????????????font-size:?14px;
????????}
????</style>
</head>
<body>
<table?border="1"?width="50%"?id="table">
????<tr>
????????<th>學(xué)號</th>
????????<th>姓名</th>
????????<th>操作</th>
????</tr>
????<tr>
????????<td>xh001</td>
????????<td>王小明</td>
????????<td?class="del"><a?href="javascript:;"?onclick="del(this)">刪除</a></td>???<!--在刪除按鈕上添加點擊事件??-->
????</tr>
????<tr>
????????<td>xh002</td>
????????<td>劉小芳</td>
????????<td?class="del"><a?href="javascript:;"?onclick="del(this)">刪除</a></td>???<!--在刪除按鈕上添加點擊事件??-->
????</tr>
????<tr>
????????<td>xh003</td>
????????<td>張三</td>
????????<td?class="del"><a?href="javascript:;"?onclick="del(this)">刪除</a></td>???<!--在刪除按鈕上添加點擊事件??-->
????</tr>
????<tr>
????????<td>xh004</td>
????????<td>李四</td>
????????<td?class="del"><a?href="javascript:;"?onclick="del(this)">刪除</a></td>???<!--在刪除按鈕上添加點擊事件??-->
????</tr>
????<tr>
????????<td>xh005</td>
????????<td>王五</td>
????????<td?class="del"><a?href="javascript:;"?onclick="del(this)">刪除</a></td>???<!--在刪除按鈕上添加點擊事件??-->
????</tr>
????<tr>
????????<td>xh006</td>
????????<td>趙柳</td>
????????<td?class="del"><a?href="javascript:;"?onclick="del(this)">刪除</a></td>???<!--在刪除按鈕上添加點擊事件??-->
????</tr>
</table>
<button?type="button"?id="btn"?onclick="add()">添加一行</button><!--在添加按鈕上添加點擊事件-->
</body>
<script>
????let?table?=?document.querySelector('#table');
????function?add()?{
????????let?node?=?document.createElement('tr');
????????table.childNodes[1].appendChild(node);
????????let?num=?parseInt(?Math.random()?*?10?);
????????let?txt?=?getTxt(num);
????????node.innerHTML?=?'<td>xh00'+num+'</td><td>江'+?txt?+'</td><td?class="del"><a?href="javascript:;"?onclick="del(this)">刪除</a></td>';
????????mouse()
????}
????function?getTxt(num)?{
????????let?txt?=?'';
????????switch?(num)?{
????????????case?0?:
????????????????txt?=?'靈';
????????????????break;
????????????case?1?:
????????????????txt?=?'夢';
????????????????break;
????????????case?2?:
????????????????txt?=?'葉';
????????????????break;
????????????case?3?:
????????????????txt?=?'月';
????????????????break;
????????????case?4?:
????????????????txt?=?'晚';
????????????????break;
????????????case?5?:
????????????????txt?=?'晴';
????????????????break;
????????????case?6?:
????????????????txt?=?'年';
????????????????break;
????????????case?7?:
????????????????txt?=?'吟';
????????????????break;
????????????case?8?:
????????????????txt?=?'言';
????????????????break;
????????????case?9?:
????????????????txt?=?'煙';
????????????????break;
????????}
????????return?txt
????}
????function?del(that)?{
????????table.childNodes[1].removeChild(that.parentNode.parentNode)
????}
????function?mouse()?{
????????let?tr?=?table.querySelectorAll('tr');
????????for(let?i=0;i<tr.length;i++){
????????????tr[i].onmouseover?=?function?()?{
????????????????this.classList.add('active');
????????????};
????????????tr[i].onmouseout?=?function?()?{
????????????????this.classList.remove('active');
????????????}
????????}
????}
????mouse()
</script>
</html>
2019-11-15
<!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(){??????????????? ?
???? // 鼠標(biāo)移動改變背景,可以通過給每行綁定鼠標(biāo)移上事件和鼠標(biāo)移除事件來改變所在行背景色。
??????? var aTr=document.getElementsByTagName('tr');
?? ??? ?for(var i=0;i<aTr.length;i++)
?? ??? ?{
?? ??? ???? aTr[i].onmouseover=function()
?? ??? ???? {
?? ??? ???????? this.style.backgroundColor="red";
?? ??? ???? }
?? ??? ???? aTr[i].onmouseout=function()
?? ??? ???? {
?? ??? ???????? this.style.backgroundColor="#fff";
?? ??? ???? }
?? ??? ?}
?? ? }*/
?? ? window.onload = function(){
????????? var tr=document.getElementsByTagName("tr");
????????? for(var i= 0;i<tr.length;i++)
????????? {
????????????? bgcChange(tr[i]);
????????? }
???? // 鼠標(biāo)移動改變背景,可以通過給每行綁定鼠標(biāo)移上事件和鼠標(biāo)移除事件來改變所在行背景色。
????? }??????? ?
?? ? function bgcChange(obj)
???? {
??????? obj.onmouseover=function(){
??????????? obj.style.backgroundColor="red";
??????? }
??????? obj.onmouseout=function(){
??????????? obj.style.backgroundColor="#fff";
??????? }
?? ? }
??? ?
????? // 編寫一個函數(shù)，供添加按鈕調(diào)用，動態(tài)在表格的最后一行添加子節(jié)點；
???? function addTo(){
??????? var tr=document.createElement("tr");
??????? var xh=document.createElement("td");
??????? var xm=document.createElement("td");
?? ??? ?var stuno=document.getElementById('stuno');
??????? var name=document.getElementById('name');
?? ??? ?if(name.value==""||stuno.value=="")
?? ??? ?{
?? ??? ??? ?alert("學(xué)號或姓名為空！請重新輸入");
?? ??? ??? ?return;
?? ??? ?}
??????? xh.innerHTML=stuno.value;
??????? xm.innerHTML=name.value;
??????? var del=document.createElement("td");
??????? del.innerHTML="<a href='javascript:;' onclick='del(this)' >刪除</a>";
??????? var tab=document.getElementById("table");
??????? tab.appendChild(tr);
??????? tr.appendChild(xh);
??????? tr.appendChild(xm);
??????? tr.appendChild(del);
?? ??? ?stuno.value=null;
?? ??? ?name.value=null;
?? ??? ?bgcChange(tr);
???? }
? ??? ?
???? // 創(chuàng)建刪除函數(shù)
???? function del(obj)
???? {
???????? var tr=obj.parentNode.parentNode;
???????? tr.parentNode.removeChild(tr);
???? }
? </script>
?</head>
?<body>
?? ??? <table border="1" width="50%" id="table">
?? ??? <tr>
?? ??? ?<th>學(xué)號</th>
?? ??? ?<th>姓名</th>
?? ??? ?<th>操作</th>
?? ??? </tr> ?
?? ??? <tr>
?? ??? ?<td>xh001</td>
?? ??? ?<td>王小明</td>
?? ??? ?<td><a href="javascript:;" onClick="del(this)" >刪除</a></td>?? <!--在刪除按鈕上添加點擊事件? -->
?? ??? </tr>
?? ??? <tr>
?? ??? ?<td>xh002</td>
?? ??? ?<td>劉小芳</td>
?? ??? ?<td><a href="javascript:;" onClick="del(this)">刪除</a></td>?? <!--在刪除按鈕上添加點擊事件? -->
?? ??? </tr> ?
?? ??? </table>
?????? <input type="text" id="stuno" placeholder="輸入學(xué)生學(xué)號">
?? ??? <input type="text" id="name" placeholder="輸入學(xué)生姓名">
?? ??? <input type="button" value="添加" onClick="addTo()" />?? <!--在添加按鈕上添加點擊事件? -->
?</body>
</html>