<body>
姓名：<input type="text">
学号：<input type="text">
年龄：<input type="text">
性别：<input type="text">
学历：<input type="text">
<button class="add">添加</button>
<br>
<br>
<br>
<table border="1px" width="600px" cellspacing="0" align="center">
<tr>
<td>姓名</td>
<td>学号</td>
<td>年龄</td>
<td>性别</td>
<td>学历</td>
<td>删/改</td>
</tr>
</table>
<body>
<script>
let add = document.querySelector(".add");
let input = document.querySelectorAll("body>input");
let table = document.querySelector("table")
add.onclick = function () {
console.log(input[0].value);
let tr = document.createElement("tr")；
tr.align="center";
if(!(/[0-9]{9}/.test(input[1].value))){
alert("请完整填写");
return;
}
if(!(/[0-9]{2}/.test(input[2].value))){
alert("请正确填写");
return;
}
//创建单元格
for (let i = 0; i < input.length; i++) {
let td=document.createElement("td")；
if(input[i].value.trim()==""){
alert("请完整填写");
return;
}
td.innerHTML=input[i].value;
tr.appendChild(td); // 在每行添加单元格
}
let tdLast=document.createElement("td");
let delBut=document.createElement("button");
delBut.innerHTML="删除";
tdLast.appendChild(delBut);
let updateBut=document.createElement("button");
updateBut.innerHTML="修改";
tdLast.appendChild(updateBut)；
delBut.οnclick=mydel;
updateBut.οnclick=myUPdate;
tr.appendChild(tdLast);
table.appendChild(tr);
function myUPdate(){
let arrSon=this.parentElement.parentElement.children
if (this.innerHTML=="修改"){
this.innerHTML="保存";
for (let i = 0; i < arrSon.length-1; i++) {
let myinp = document.createElement( "input");
myinp.value = arrSon[i].innerHTML;
arrSon[i].innerHTML ="";
arrSon[i].appendChild(myinp);
}
}else{
this.innerHTML="修改";
for (let i = 0; i < arrSon.length-1; i++) {
arrSon[i].innerHTML=arrSon[i].children[0].value;
}
}
}
}
function mydel(){
this.parentElement.parentElement.remove();
}
</script>
</body>