JavaScript的table表格的增删改（面向对象）
运行效果
HTML部分：
Document
姓名:
性别: 男
女
保密
年龄:
城市:
姓名:
性别: 男
女
保密
年龄:
城市:
序号
姓名
性别
年龄
城市
删除
修改
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 = '没有匹配的内容
${item.id}
${item.name}
${item.sex}
${item.age}
${item.city}
`;
});
// 将内容写入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';
})
}
}