HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main{
position: absolute;
left: 50%;
transform: translateX(-50%);
margin-top: -40px;
}
.main input{
width: 80px;
}
table{
user-select: none;
margin-top: 100px;
border-collapse: collapse;
}
table tr{
height: 50px;
text-align: center;
}
</style>
</head>
<body>
<div class="main">
姓名：<input type="text">
年龄：<input type="text">
性别：<input type="text">
<button>添加</button>
<button>删除</button></div>
<table border="1" width="300" align="center">
<tbody>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>four</td>
<td>five</td>
<td>six</td>
</tr>
<tr>
<td>seven</td>
<td>eight</td>
<td>nine</td>
</tr>
</tbody>
</table>
<script>
let tab=document.getElementsByTagName('table')[0];
let ipu=document.getElementsByTagName('input');
let btn=document.getElementsByTagName('button');
trss=document.getElementsByTagName('tr');
//--------------------------------------------------------------
btn[0].addEventListener('click',function(){ //添加行
if(ipu[0].value!=""&&ipu[1].value!=""&&ipu[2].value!=""&&!isNaN(ipu[1].value)){ //ipu都不为空就添加，否则btn不可用；并判断年龄是不是一个数字
let tr=document.createElement('tr');
tab.tBodies[0].appendChild(tr);
let trs=tab.tBodies[0].appendChild(tr);
for(let i=0;i<3;i++){
let td=document.createElement('td');
trs.appendChild(td);
td.innerHTML=ipu[i].value;
ipu[i].value="";
}
a();
}else{
btn[0].disabled=true;
let timer=setTimeout(function(){
btn[0].disabled=false;
},1000);
}
});
// --------------------------------------------------
btn[1].addEventListener('click',function(){ //删除行
let c=tab.tBodies[0].rows.length-1;
if(c==-1){
btn[1].disabled=true;
setTimeout(function(){
btn[1].disabled=false;
},1000)
}else{
tab.tBodies[0].removeChild(trss[c]);
}
});
//----------------------------------------------------
window.addEventListener('load',a); //网页加载
//----------------------------------------------------
function a(){for(let i=0;i<tab.tBodies[0].rows.length;i++){
if(i%2==0){ //隔行变色
tab.tBodies[0].rows[i].style.background="pink";
}
for(let j=0;j<tab.tBodies[0].rows[i].cells.length;j++){
let col=tab.tBodies[0].rows[i].cells[j].style.background; //获取原来的颜色
tab.tBodies[0].rows[i].cells[j].onmouseover=function(){
tab.tBodies[0].rows[i].cells[j].style.background="lightblue";
}
tab.tBodies[0].rows[i].cells[j].onmouseout=function(){
tab.tBodies[0].rows[i].cells[j].style.background=col;
}
}
}
}
</script>
</body>
</html>
ScreenShot_20210522152858.png
----21/05/22
