一、需求说明
1、新增
通过输入框输入基本信息（姓名、性别、年龄、城市）之后，点击确定按钮即可往表格中新增一项信息；点击重置会清空你所输入的信息。
2、删除
点击表格中每一项信息之后的删除按钮，在弹出的确定弹窗中点击确定即可删除该项信息。
3、修改
点击表格中每一项信息之后的修改按钮，在弹出的页面中修改要改变的信息，点击确定按钮，即可完成表格中该项信息的修改。
二、完整代码（含注释）
<!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;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;}</style></head><body><div class="add"><p style="color: darkcyan; font-size: 25px;">新增</p>姓名: <input type="text" name="name"><br>年龄: <input type="text" name="age"><br>性别: 男<input type="radio" name="sex" value="男">女<input type="radio" name="sex" value="女">保密<input type="radio" name="sex" value="保密"><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><button type="reset">重置</button></div><hr><table><thead><tr><td>序号</td><td>姓名</td><td>性别</td><td>年龄</td><td>城市</td><td>删除</td><td>修改</td></tr></thead><tbody></tbody></table><div class="change"><div>姓名: <input type="text" name="name"><br>年龄: <input type="text" name="age"><br>性别: 男<input type="radio" name="sex" value="男">女<input type="radio" name="sex" value="女">保密<input type="radio" name="sex" value="保密"><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><button>取消</button></div></div><script>// 根据数组动态生成页面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"]');// 城市optionconst oOptChange = oChange.querySelectorAll('option');// 定义一个变量 // 存储 修改标签 对应的索引下标 let index;// 调用函数动态渲染生成页面setPage();// 封装函数 动态渲染生成页面function setPage() {// 空数组 生成 对应的 空内容if (arr.length === 0) {oTbody.innerHTML = '<tr><td colspan="7">没有匹配数据</td></tr>';return;}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>`;})oTbody.innerHTML = str;}// 新增// 给确定按钮添加点击事件oBtnEnsure.addEventListener('click', function () {// 弹出确认框，点击确定之后，再执行程序// 也就是 window.confirm() 的返回值是true，再执行程序if (window.confirm('您确定要添加吗?')) {// 获取数据 // 获取 姓名let name = oIptName.value;console.log(name);// 获取 年龄 转化为数值类型let age = oIptAge.value - 0;// 获取 城市// 通过 数组 将 城市对应的数值 转化为具体的中文数据let city = cityArr[oSelCity.value];// 获取 性别let sex;for (let i = 0; i <= oIptSex.length - 1; i++) {if (oIptSex[i].checked) {sex = oIptSex[i].value;break;}}//这里也可以用forEach，但是forEach会从头循环到尾，不如用for循环，可以在找到满足条件之后终止循环// oIptSex.forEach(function (item) {//if (item.checked) {// sex = item.value;//}// })// 新增id 是 原始数据中 最后一个数据单元id值 +1 let id = arr[arr.length - 1].id + 1;// 生成一个对象，写入数组的末位arr.push({id: id,name: name,sex: sex,age: age,city: city})console.log(arr);// 再次调用函数，动态渲染生成新的页面setPage();}})// 给重置按钮添加点击事件oBtnReset.addEventListener('click', function () {oIptName.value = '';oIptAge.value = '';for (let i = 0; i <= oIptSex.length - 1; i++) {oIptSex[i].checked = false;}oSelCity.value = 0;})// 给<tbody>标签添加点击事件// 通过事件委托实现项目需求oTbody.addEventListener('click', function (e) {// 根据 e.target不同的name，判断点击的是什么标签，执行不同程序// 删除程序if (e.target.getAttribute('name') === 'del') {// 弹出确认框，点击确定后再执行删除程序if (!window.confirm('您确定要删除吗?')) {return;}// 在数组中按照点击删除按钮存储的索引下标，删除一个单元arr.splice(Number(e.target.getAttribute('index')), 1);// 根据新数组，动态渲染生成页面setPage();// 修改程序} else if (e.target.getAttribute('name') === 'change') {// 让修改的div标签出现oChange.style.display = 'flex'; // css样式中用了弹性盒子，所以这里要用display:flex// 给变量赋值存储修改标签对应的索引下标index = Number(e.target.getAttribute('index'));// 显示要修改的原始数据// 姓名、年龄，直接赋值 oIptNameChange.value = arr[index].name;oIptAgeChange.value = arr[index].age;// 循环遍历存储性别的 input伪数组// 哪个标签的 value和数组对象中 sex的键值相同，就添加 checked，默认选中。for (let i = 0; i <= oIptSexChange.length - 1; i++) {if (oIptSexChange[i].value === arr[index].sex) {// 给对应的性别得 input标签添加选中效果oIptSexChange[i].checked = true;// 终止循环break;}}// 循环遍历 城市option伪数组// select>option标签 的 内容 和 数组arr中对应的对象的city数据相同// 给 这个 select>option标签 添加 选中效果for (let i = 0; i <= oOptChange.length - 1; i++) {if (oOptChange[i].innerHTML === arr[index].city) {oOptChange[i].selected = true;}}}})// 给修改页面里面的 确定按钮添加点击事件oBtnEnsureChange.addEventListener('click', function () {// 弹出确认框，点击确定再执行程序if (window.confirm('您确定要修改吗?')) {// 获取 修改标签中的数据数值// 获取 姓名let name = oIptNameChange.value;// 获取 年龄，转化为数值类型let age = oIptAgeChange.value - 0;// 获取 城市// 通过数组，将城市对应的数值转化为具体的中文数据let city = cityArr[oSelCityChange.value];// 获取 性别let sex;for (let i = 0; i <= oIptSexChange.length - 1; i++) {if (oIptSexChange[i].checked) {sex = oIptSexChange[i].value;break;}}// 修改点击的修改标签中 存储的索引下标对应的数组中的对象所存储的数据arr[index].name = name;arr[index].age = age;arr[index].sex = sex;arr[index].city = city;// 调用函数 根据新的数组动态渲染生成页面setPage();// 让 修改 页面 再次隐藏oChange.style.display = 'none';}})// 给修改的取消按钮添加点击事件oBtnCancelChange.addEventListener('click', function () {// 让修改 页面 隐藏oChange.style.display = 'none';})</script></body></html>
三、步骤总结
1、定义函数setPage()，动态渲染生成页面
1-1由于当前没有数据库数据，所以自己定义一个数组来模拟数据库数据
1-2定义变量，存储最终的字符串内容
1-3循环遍历数组数据，根据数组中的数据动态生成字符串
1-4如果数组中没有内容，需要做出相应提示
1-5将字符串写入标签对象
2、新增的点击事件
给数组新增数据单元，数据单元必须符合数组中数据结构，对象中以键值对的形式存储数据，要符合原始数组中 键名存储键值的形式，根据新的数组再次动态渲染生成页面。
2-1弹出确认框，确定之后再执行新增操作
2-2获取标签对象中的数据
2-3将数据定义成对象的形式，写入数组的末位中
2-4再次调用setPage()函数动态渲染生成页面
3、通过事件委托的形式给删除、修改标签添加点击事件
删除：
3-1弹出确认框确定之后再执行删除操作
3-2获取点击的删除标签存储的索引下标，按照这个索引下标从数组中删除一个数据单元
3-3调用函数，根据新数组再次动态渲染生成页面
修改：
3-1让修改页面显示
3-2给全局变量index存储点击修改标签对应的索引下标
3-3给修改页面中的标签赋值数组中对应的对象存储的数据。name、age两个input直接赋值对象中存储的name、age数据；循环遍历性别input标签伪数组，如果性别input标签的value和数组中对应对象存储的sex数据相同，给这个性别input标签checked属性赋值true，之后终止循环；循环遍历城市option标签伪数组，如果城市option标签的内容和数组中对应对象存储的city数据相同，给这个城市option标签selected属性赋值true，之后终止循环
4,、修改的确定按钮，添加点击事件
获取input等标签中输入的数据，修改数组中对应的对象单元存储的数据，根据新的数组 动态渲染生成页面。
4-1弹出确认框，确定之后再执行删除操作
4-2获取input、select等标签存储的数据
4-3根据全局变量index作为索引下标，修改数组中对应索引下标获取的对象单元存储的数据数值
4-4调用函数setPage()，根据新的数组单元再次动态渲染生成页面内容
4-5让修改页面隐藏消失
5、修改页面的取消按钮，添加点击事件，让修改页面隐藏消失。
![Javascript操作select方法大全[新增 修改 删除 选中 清空 判断存在等]_表单特效](https://100zi.50zi.cn/uploadfile/img/14/556/27edef8a74d9dfd702212e8a22c5b5f1.jpg)
