<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 240px;
height: 180px;
background-color: pink;
position: absolute;
left: 50%;
top: 50%;
display: none;
}
</style>
</head>
<body>
工号：<input type="text" id="inp1"><br>
姓名：<input type="text" id="inp2"><br>
性别：<input type="radio" name="sem">男
<input type="radio" name="sem">女<br>
部门：<select name="" id="sel">
<option value="人事部">人事部</option>
<option value="运营部">运营部</option>
<option value="销售部">销售部</option>
<option value="财务部">财务部</option>
</select><br>
<button onclick="fn()">添加</button>
<hr>
<table border="1" cellspacing="0">
<thead>
<tr>
<td>工号</td>
<td>姓名</td>
<td>性别</td>
<td>部门</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr>
<td>1002</td>
<td>张三</td>
<td>男</td>
<td>财务部</td>
<td>
<button onclick="shan(this)">删除</button>
<button onclick="xiu(this)">修改</button>
</td>
</tr>
</tbody>
</table>
<div>
工号：<input type="text" id="inp11"><br>
姓名：<input type="text" id="inp22"><br>
性别：<input type="radio" name="sem1">男
<input type="radio" name="sem1">女<br>
部门：<select name="" id="sel1">
<option value="人事部">人事部</option>
<option value="运营部">运营部</option>
<option value="销售部">销售部</option>
<option value="财务部">财务部</option>
</select><br>
<button onclick="bao()">保存</button>
<button onclick="qu()">取消</button>
</div>
</body>
<script>
//获取
var oInp1 = document.getElementById('inp1');
var oInp2 = document.getElementById('inp2');
var oNem = document.getElementsByName('sem');
var oSel = document.getElementById('sel');
var oTbd = document.querySelector('tbody');
//弹框
var oDiv = document.querySelector('div')
var oInp11 = document.getElementById('inp11');
var oInp22 = document.getElementById('inp22');
var oNem1 = document.getElementsByName('sem1');
var oSel1 = document.getElementById('sel1');
//点击添加
function fn() {
if (oInp1.value == '' || oInp2.value == '') {
alert('请输入内容')
return;
}
//创建
var oTr = document.createElement('tr');
var oTd1 = document.createElement('td');
var oTd2 = document.createElement('td');
var oTd3 = document.createElement('td');
var oTd4 = document.createElement('td');
var oTd5 = document.createElement('td');
//设置样式
oTd1.innerHTML = oInp1.value;
oTd2.innerHTML = oInp2.value;
if (oNem[0].checked) {
oTd3.innerHTML = '男'
}
if (oNem[1].checked) {
oTd3.innerHTML = '女'
}
oTd4.innerHTML = oSel.value;
oTd5.innerHTML = `<button οnclick="shan(this)">删除</button>
<button οnclick="xiu(this)">修改</button>`;
//追加
oTr.appendChild(oTd1);
oTr.appendChild(oTd2);
oTr.appendChild(oTd3);
oTr.appendChild(oTd4);
oTr.appendChild(oTd5);
oTbd.appendChild(oTr)
}
//点击删除
function shan(obj) {
obj.parentNode.parentNode.remove()
}
//点击修改
var oTr;
function xiu(obj) {
oDiv.style.display = 'block';
oTr = obj.parentNode.parentNode;
oInp11.value = oTr.cells[0].innerHTML;
oInp22.value = oTr.cells[1].innerHTML;
if (oTr.cells[2].innerHTML == '男') {
oNem1[0].checked = true;
}
if (oTr.cells[2].innerHTML == '女') {
oNem1[1].checked = true;
}
oSel1.value = oTr.cells[3].innerHTML
}
//点击保存
function bao() {
oTr.cells[0].innerHTML = oInp11.value;
oTr.cells[1].innerHTML = oInp22.value;
if (oNem1[0].checked) {
oTr.cells[2].innerHTML = '男'
}
if (oNem1[1].checked) {
oTr.cells[2].innerHTML = '女'
}
oTr.cells[3].innerHTML = oSel1.value;
oDiv.style.display = 'none'
}
//点击取消
function qu() {
oDiv.style.display = 'none'
}
</script>
</html>
