运行效果
?HTML部分：
<!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="男">
女<input type="radio" name="sex" value="女">
保密<input type="radio" name="sex" value="保密"><br>
年龄: <input type="number" name="age" min="0" max="250"><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>新增</button>
</div>
<!-- 修改 -->
<div class="change">
<div>
姓名: <input type="text" name="name"><br>
性别: 男<input type="radio" name="sex" value="男">
女<input type="radio" name="sex" value="女">
保密<input type="radio" name="sex" value="保密"><br>
年龄: <input type="number" name="age" min="0" max="250"><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 src="./tablefun.js"></script>
<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 oDivAdd = document.querySelector('.add');
const oDivChange = document.querySelector('.change');
// 面向对象编程
// 调用 构造函数 生成 实例化对象
const xx = new CreateFunction(oTable,arr,oDivAdd,oDivChange);
// 入口函数
xx.init();
</script>
</body>
</html>JavaScript代码：
class CreateFunction {
constructor(element, ImgArr, addElement, changeElement) {
// 定义属性 存储 形参
this.ele = element;
this.arr = ImgArr;
this.add = addElement;
this.change = changeElement;
// 全局变量
this.oTbody;
// 新增相关的全局变量
this.oAddIptName;
this.oAddIptAge;
this.oAddIptCity;
this.oAddIptSexAll;
this.oAddBtn;
this.cityArr = ['北京', '上海', '广州', '重庆', '天津'];
// 修改相关的变量
this.oChangeIptName;
this.oChangeIptAge;
this.oChangeIptCity;
this.oChangeIptSexAll;
this.oChangeOption;
this.oChangeBtnTrue;
this.oChangeBtnFalse;
}
// 入口函数
init() {
this.setPage();
this.addPage();
this.changePage();
this.changes();
}
// 内容动态生成
setPage() {
this.oTbody = this.ele.querySelector('tbody');
// 如果数组长度 是 0 证明 是一个空数组
if (this.arr.length === 0) {
// 页面对象生成 空内容
this.oTbody.innerHTML = '<tr><td colspan="7">没有匹配的内容</td></tr>';
// 如果数组长度 不是 0 证明 数组有内容
} else {
// 根据数组内容 生成页面内容
// 定义空字符串
let str = '';
// 循环遍历数组
this.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标签中
this.oTbody.innerHTML = str;
}
}
addPage() {
// 数据标签
this.oAddIptName = this.add.querySelector('[name="name"]');
this.oAddIptAge = this.add.querySelector('[name="age"]');
this.oAddIptCity = this.add.querySelector('[name="city"]');
this.oAddIptSexAll = this.add.querySelectorAll('[name="sex"]');
// button标签
this.oAddBtn = this.add.querySelector('button');
// 给 新增 input标签 添加 点击事件
this.oAddBtn.addEventListener('click', () => {
// 确定 添加 再执行 添加操作
// 点击 取消 执行 return 终止之后程序的操作
// if语句 {} 中 只有一行代码 可以不写 { }
if (!window.confirm('您确定要添加吗?')) return;
// 获取数据
let name = this.oAddIptName.value;
let age = this.oAddIptAge.value;
// 使用 索引下标 从 数组中获取对应的城市名称
let city = this.cityArr[Number(this.oAddIptCity.value)];
let sex = '';
// 性别 是 多个单选按钮 选中那个标签 获取那个标签的数据
for (let i = 0; i <= this.oAddIptSexAll.length - 1; i++) {
// i 是索引下标
// oAddIptSexAll[i] 是 单选标签
if (this.oAddIptSexAll[i].checked) {
// 如果 oAddIptSexAll[i].checked 为 true
// 也就是 选中的是当前这个 input标签
// 获取 这个input标签的value数据
sex = this.oAddIptSexAll[i].value;
// 终止之后的循环操作
break;
}
}
// 将数据定义为 对象
// 实际项目中 id序号 是 后端程序根据 数据库数据自动添加的
// 目前凑合写一个 原始数组 最后有一个数据 id+1
const obj = { id: arr[arr.length - 1].id + 1, name: name, age: age, sex: sex, city: city };
console.log(obj);
// 将新对象 写入 数组末位
this.arr.push(obj);
// 再次调用函数 动态渲染新增页面内容
this.setPage();
})
}
changePage() {
// 数据标签
this.oChangeIptName = this.change.querySelector('[name="name"]');
this.oChangeIptAge = this.change.querySelector('[name="age"]');
this.oChangeIptCity = this.change.querySelector('[name="city"]');
this.oChangeIptSexAll = this.change.querySelectorAll('[name="sex"]');
this.oChangeOption = this.change.querySelectorAll('option');
// button标签
this.oChangeBtnTrue = this.change.querySelector('[name="true"]');
this.oChangeBtnFalse = this.change.querySelector('[name="false"]');
// 通过事件委托 给 tbody 标签 添加 点击事件
this.oTbody.addEventListener('click', (e) => {
// 事件对象 name属性值 是 del 点击的是删除按钮
if (e.target.getAttribute('name') === 'del') {
// 确定删除 再执行删除程序
if (window.confirm('您确定要删除吗?')) {
// 执行删除程序
this.arr.splice(Number(e.target.getAttribute('index')), 1);
// 再次调用函数动态生成新的页面内容
this.setPage();
}
// 事件对象 name属性值 是 change 点击的是修改按钮
} else if (e.target.getAttribute('name') === 'change') {
// 让 修改div显示
this.change.style.display = 'flex';
// 设定 修改div 中 input等标签 显示的原始数据
// 设定的是 修改button 对应的 数组单元 也就是 数组中存储的对象 其中的数据
// button标签 index属性 存储 索引下标
const obj = this.arr[Number(e.target.getAttribute('index'))];
// 设定 修改标签 index属性的属性值
// 和 当前 修改button标签 index属性的属性值相同
this.oChangeBtnTrue.setAttribute('index', Number(e.target.getAttribute('index')));
// 设定标签的数据
// name age 直接写入数据
this.oChangeIptName.value = obj.name;
this.oChangeIptAge.value = obj.age;
// 性别 循环遍历 性别input标签
// 给 标签value 和 对象中value相同给的标签 添加 checked默认选中
for (let i = 0; i <= this.oChangeIptSexAll.length - 1; i++) {
if (this.oChangeIptSexAll[i].value === obj.sex) {
this.oChangeIptSexAll[i].checked = true;
break;
}
}
// 城市 option 循环遍历
// option标签value作为索引下标 从 数组中 获取 城市字符串
// 和 对象中 city 属性对应的属性值 相同
// 添加选中状态
for (let i = 0; i <= this.oChangeOption.length - 1; i++) {
// i 是 索引下标
// oChangeOption[i] 是 option标签
// oChangeOption[i].value 是 0 1 2 3 4 ...
// cityArr[ Number(oChangeOption[i].value) ] 从数组中获取城市名称
if (this.cityArr[Number(this.oChangeOption[i].value)] === obj.city) {
// option标签 添加 选中状态
this.oChangeOption[i].selected = true;
// 终止循环
break;
}
}
}
})
}
changes() {
// 给 修改 取消标签 添加点击事件
this.oChangeBtnFalse.addEventListener('click', () => {
// 点击取消 不再修改数据 让 修改div 隐藏
this.change.style.display = 'none';
})
// 给 修改 确定标签 添加点击事件
this.oChangeBtnTrue.addEventListener('click', (e) => {
// 弹出提示框 确定再修改
if (!window.confirm('您确定修改吗?')) return;
// 修改数组中对应单元的数据
// 根据 确定标签 设定的index属性 作为索引下标 从数组中获取数据
let obj = this.arr[Number(e.target.getAttribute('index'))];
// 修改对象中的数据 是 修改input标签中的数据
obj.name = this.oChangeIptName.value;
obj.age = this.oChangeIptAge.value;
obj.city = this.cityArr[Number(this.oChangeIptCity.value)];
for (let i = 0; i <= this.oChangeIptSexAll.length - 1; i++) {
if (this.oChangeIptSexAll[i].checked) {
obj.sex = this.oChangeIptSexAll[i].value;
break;
}
}
// 根据新的数据再次动态渲染生成页面
this.setPage();
// 让修改div隐藏
this.change.style.display = 'none';
})
}
}