case:
Dynamic rendering generates the following table, and makes it possible to add, delete, and modify operations
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
border-collapse: collapse;
}
td {
width: 100px;
height: 50px;
text-align: center;
border: 1px solid #000;
}
.add {
margin: 0 0 50px 0;
}
.change {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
display: none;
}
.change>div {
width: 300px;
height: 200px;
background: #fff;
padding: 20px 0 0 20px
}
</style>
</head>
<body>
<div class="add">
姓名：<input type="text" name="name"><br>
性别：男<input type="radio" name="sex" value="男"><br>
女<input type="radio" name="sex" value="女"><br>
保密<input type="radio" name="sex" value="保密"><br>
年龄：<input type="number" name="age" min="0" max="100"><br>
城市：<select name="city">
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
<option value="4">武汉</option>
</select>
<button>新增</button>
</div>
<div class="change">
<div>
姓名：<input type="text" name="name"><br>
性别：男<input type="radio" name="sex" value="男"><br>
女<input type="radio" name="sex" value="女"><br>
保密<input type="radio" name="sex" value="保密"><br>
年龄：<input type="number" name="age" min="0" max="100"><br>
城市：<select name="city">
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
<option value="4">武汉</option>
</select><br>
<button name="true">确定</button>
<button name="false">取消</button>
</div>
</div>
<table>
<thead>
<tr>
<td>序号</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>城市</td>
<td>删除</td>
<td>修改</td>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
//定义一个数组模拟数据库数据
const arr = [
{ id: 1, name: '张三', age: 18, sex: '男', city: '北京' },
{ id: 2, name: '李四', age: 19, sex: '女', city: '上海' },
{ id: 3, name: '王五', age: 20, sex: '男', city: '广州' },
{ id: 4, name: '赵六', age: 21, sex: '女', city: '深圳' },
{ id: 5, name: '刘七', age: 22, sex: '男', city: '武汉' },
];
//获取标签对象
const oTable = document.querySelector('table');
const oTbody = oTable.querySelector('tbody');
//获取新增标签对象
const oDivAdd = document.querySelector('.add');
const oAddName = oDivAdd.querySelector('[name="name"]');
const oAddSexAll = oDivAdd.querySelectorAll('[name="sex"]');
const oAddAge = oDivAdd.querySelector('[name="age"]');
const oAddCity = oDivAdd.querySelector('[name="city"]');
//获取button标签
const oAddBut = oDivAdd.querySelector('button');
//获取修改标签对象
const oDivChange = document.querySelector('.change');
const oChangeName = oDivChange.querySelector('[name="name"]');
const oChangeSexAll = oDivChange.querySelectorAll('[name="sex"]');
const oChangeAge = oDivChange.querySelector('[name="age"]');
const oChangeCity = oDivChange.querySelector('[name="city"]');
const oChangeOption = oDivChange.querySelector('option');
获取button标签
const oChangeButTrue = oDivChange.querySelector('[name="true"]');
const oChangeButFalse = oDivChange.querySelector('[name="false"]');
//定义城市数组，模拟数据库
const cityArr = ['北京', '上海', '广州', '深圳', '武汉'];
//调用函数1，动态生成页面内容
setPage();
//函数1 动态生成页面 生成tbody中的标签
function setPage() {
//如果数组长度是0，证明是一个空数组
if (arr.length === 0) {
oTbody.innerHTML = `<tr><td colspan="7">没有匹配的内容</td></td>`;
//如果数组长度不是0，证明数组有数值数据
} else {
//根据数组内容生成页面内容
//定义空字符串
let str = '';
//循环遍历数组
arr.forEach(function (item, key) {
str += `
<tr>
<td>${item.id}</td>
<td>${item.name}</td>
<td>${item.sex}</td>
<td>${item.age}</td>
<td>${item.city}</td>
<td><button name="del" index="${key}">删除</button></td>
<td><button name="change" index="${key}">修改</button></td>
</tr>
`;
})
//将内容写入tbody标签中
oTbody.innerHTML = str;
}
}
//通过事件委托给tbody标签添加点击事件
oTbody.addEventListener('click', function (e) {
//事件对象name属性值是del，点击的是删除按钮
if (e.target.getAttribute('name') === 'del') {
//提醒用户是否执行删除程序
if (window.confirm('您确定要删除吗?')) {
//执行删除程序
arr.splice(Number(e.target.getAttribute('index')), 1);
//再次调用函数1，重新生成页面
setPage();
}
} else if (e.target.getAttribute('name') === 'change') {
//让修改的div显示
oDivChange.style.display = 'flex';
//设定修改div中input等标签，显示的原始数据
//设定的是修改button对应的数组单元，也就是数组中存储的对象中的数据
//button标签index属性存储索引下标
const obj = arr[Number(e.target.getAttribute('index'))];
//设定修改标签index属性的属性值
//和当前修改button标签，index属性的属性值相同
oChangeButTrue.setAttribute('index', Number(e.target.getAttribute('index')));
//设定标签的数据
//name,age直接写入数据
oChangeName.value = obj.name;
oChangeAge.value = obj.age;
//sex 性别循环遍历
//给性别input标签value和对象中value相同的标签，添加checked默认选中
for (let i = 0; i < oChangeSexAll.length; i++) {
if (oChangeSexAll[i].value === obj.sex) {
oChangeSexAll[i].checked = true;
break;
}
}
//city 城市遍历循环
//option标签value作为索引下标，从数组中获取城市字符串
//和对象中city属性对应的属性值相同，添加选中状态
for (let i = 0; i < oChangeOption.length; i++) {
if (cityArr[Number(oChangeOption[i].value)] === obj.city) {
oChangeOption[i].selected = true;
break;
}
}
}
})
//给新增input标签添加点击事件
oAddBut.addEventListener('click', function () {
if (!window.confirm('您确定要添加吗?')) return;
//获取添加的数据
let name = oAddName.value;
let age = oAddAge.value;
let city = cityArr[Number(oAddCity.value)];
let sex = '';
//性别是多个单选按钮，选中哪个标签，获取哪个标签的数据
for (let i = 0; i < oAddSexAll.length; i++) {
//i是索引下标
//oAddIptSexAll[i]是单选标签
//如果选中的是当前这个 input标签
if (oAddSexAll[i].checked) {
// 获取这个input标签的value数据
sex = oAddSexAll[i].value;
break;
}
}
//将数据定义为对象
const obj = { id: arr[arr.length - 1].id + 1, name: name, age: age, sex: sex, city: city };
//将新对象写入数组末位
arr.push(obj);
//再次调用函数1，动态渲染新增页面内容
setPage();
})
//给修改 取消标签，添加点击事件
oChangeButFalse.addEventListener('click', function () {
//点击取消，不再修改数据，让修改div隐藏
oDivChange.style.display = 'none';
})
//给修改 确定标签，添加点击事件
oChangeButTrue.addEventListener('click', function () {
//提醒用户是否执行修改操作
if (!window.confirm('您确定修改吗?')) return;
//修改数组中对应单元的数据
//根据确定标签设定的index属性，作为索引下标，从数组中获取数据
let obj = arr[Number(this.getAttribute('index'))];
//修改对象中的数据就是修改input标签中的数据
obj.name = oChangeName.value;
obj.age = oChangeAge.value;
obj.city = cityArr[Number(oChangeCity.value)];
for (let i = 0; i < oChangeSexAll.length; i++) {
if (oChangeSexAll[i].checked) {
obj.sex = oChangeSexAll[i].value;
break;
}
}
//再次调用函数1，动态渲染生成页面
setPage();
//让修改的div隐藏
oDivChange.style.display = 'none';
})
</script>
</body>
</html>