html
姓名:<input type="text">
学号<input type="text">
年龄:<input type="text">
性别:<input type="text">
学历:<input type="text">
<button class="add">添加</button>
<table width="800px" height="50px">
<tr>
<th>姓名</th>
<th>学号</th>
<th>年龄</th>
<th>性别</th>
<th>学历</th>
<th>增删</th>
</tr>
</table>
css
table,
tr,
td,
th {
border: 1px solid;
border-collapse: collapse;
text-align: center;
}
table {
margin: 10px auto;
}
JavaScript
//获取添加按钮
let add = document.querySelector('.add');
//获取table元素
let table = document.querySelector('table');
//获取所有的input
let input = document.querySelectorAll('body>input');
//点击添加
add.onclick = function () {
//创建tr
let tr = document.createElement('tr');
//将tr放入table
table.appendChild(tr);
for (let i = 0; i < input.length; i++) {
//判断每个输入内容是否为空
if (input[i].value.trim() == '') {
return alert('请填写完整信息!!!');
}
}
//正则判断姓名
if (!(/^[\u4E00-\u9FA5]{2,4}$/.test(input[0].value))) {
return alert('请输入合法的姓名!!!');
}
//正则判断学号
if (!(/[0-9]{9}/.test(input[1].value))) {
return alert('请输入正确的学号!!!');
}
//正则判断年龄
if (!(/^(([0-9]|[1-9][1-9]|1[0-7][0-9])(\\.[0-9]+)?|180)$/.test(input[2].value))) {
return alert('请输入正确的年龄');
}
//正则判断性别
if (!(/^(男|女){1}$/.test(input[3].value))) {
return alert('请输入正确的性别');
}
//循环遍历input,根据每一个value创建td
for (let i = 0; i < input.length; i++) {
//创建td
let td = document.createElement('td');
td.innerHTML = input[i].value;
tr.appendChild(td);
}
//创建最后一个td并添加到tr中
let td = document.createElement('td');
tr.appendChild(td);
//创建删除按钮并添加到td中
let del = document.createElement('button');
del.innerHTML = '删除';
td.appendChild(del);
//创建修改按钮并添加到td中
let ale = document.createElement('button');
ale.innerHTML = '修改';
td.appendChild(ale);
//删除
del.onclick = getDel;
//点击按钮修改
ale.onclick = updata;
}
function getDel() {
this.parentElement.parentElement.remove();
}
function updata() {
//得到所有的tr
let arrSon = this.parentElement.parentElement.children;
if (this.innerHTML == '修改') {
//切换状态
this.innerHTML = '保存';
for (let i = 0; i < arrSon.length - 1; i++) {
//创建input框
let myinput = document.createElement('input');
//将原本的内容放进input框中
myinput.value = arrSon[i].innerHTML;
//清空原有的内容
arrSon[i].innerHTML = '';
//将创建的input框架追加到对应的tr中
arrSon[i].appendChild(myinput);
}
} else {
//切换状态
this.innerHTML = '修改';
for (let i = 0; i < arrSon.length - 1; i++) {
//得到修改后的value值
arrSon[i].innerHTML = arrSon[i].children[0].value;
}
}
}