|
一、需求说明
1、新增 通过输入框输入基本信息（姓名、性别、年龄、城市）之后，点击确定按钮即可往表格中新增一项信息；点击重置会清空你所输入的信息。 
2、删除 点击表格中每一项信息之后的删除按钮，在弹出的确定弹窗中点击确定即可删除该项信息。 
3、修改 点击表格中每一项信息之后的修改按钮，在弹出的页面中修改要改变的信息，点击确定按钮，即可完成表格中该项信息的修改。 
二、完整代码（含注释）
Document
table {
border-collapse: collapse;
}
td {
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
border: 1px solid #000;
font-size: 30px;
}
.change {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: none;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
}
.change>div {
width: 300px;
height: 300px;
padding: 30px 15px;
background: #fff;
}
新增
姓名:
年龄:
性别: 男
女
保密
城市:
北京
上海
广州
重庆
天津
确定
重置
序号
姓名
性别
年龄
城市
删除
修改
姓名:
年龄:
性别: 男
女
保密
城市:
北京
上海
广州
重庆
天津
确定
取消
// 根据数组动态生成页面
const arr = [{
id: 1,
name: '张三',
sex: '男',
age: 18,
city: '北京'
},
{
id: 2,
name: '李四',
sex: '女',
age: 19,
city: '上海'
},
{
id: 3,
name: '王五',
sex: '男',
age: 20,
city: '广州'
},
{
id: 4,
name: '赵六',
sex: '女',
age: 21,
city: '重庆'
},
{
id: 5,
name: '刘七',
sex: '保密',
age: 22,
city: '天津'
},
];
// 城市数组
const cityArr = ['北京', '上海', '广州', '重庆', '天津'];
// 获取标签对象
const oTbody = document.querySelector('tbody');
// 获取 新增相关 标签对象
const oAdd = document.querySelector('.add');
// 确定按钮
const oBtnEnsure = oAdd.querySelectorAll('button')[0];
// 重置按钮
const oBtnReset = oAdd.querySelectorAll('button')[1];
// 姓名
const oIptName = oAdd.querySelector('[name="name"]');
// 年龄
const oIptAge = oAdd.querySelector('[name="age"]');
// 性别
const oIptSex = oAdd.querySelectorAll('[name="sex"]');
// 城市
const oSelCity = oAdd.querySelector('[name="city"]');
// 获取 修改相关 标签对象
const oChange = document.querySelector('.change');
// 确定按钮
const oBtnEnsureChange = oChange.querySelectorAll('button')[0];
// 取消按钮
const oBtnCancelChange = oChange.querySelectorAll('button')[1];
// 姓名
const oIptNameChange = oChange.querySelector('[name="name"]');
// 年龄
const oIptAgeChange = oChange.querySelector('[name="age"]');
// 性别
const oIptSexChange = oChange.querySelectorAll('[name="sex"]');
// 城市
const oSelCityChange = oChange.querySelector('[name="city"]');
// 城市option
const oOptChange = oChange.querySelectorAll('option');
// 定义一个变量
// 存储 修改标签 对应的索引下标
let index;
// 调用函数动态渲染生成页面
setPage();
// 封装函数 动态渲染生成页面
function setPage() {
// 空数组 生成 对应的 空内容
if (arr.length === 0) {
oTbody.innerHTML = '没有匹配数据';
return;
}
let str = '';
arr.forEach(function (item, key) {
str += `
${item.id}
${item.name}
${item.sex}
${item.age}
${item.city}
|