可编辑表格
一、 实现思路：
1.首先是需要有一个Json文件，用于存储学生信息和成绩 2.要进行模块化，HTML只写DOM元素，CSS只写样式，JS只写逻辑。 3.梳理思路，首先肯定是要写出大体的表格框架，就是DOM元素，写出表格头和表格体，并给一个渲染的数据容器tbody。 4.进行一些基础设置，设置一些变量和常量，并且DOM操作获取当前元素。 5.设置函数来对表格进行设置，比如数据渲染，数据修改，编辑范围，删除等。
二、
核心代码展示：
// 读取本地json数据 async function fetchData() { const response = await fetch('G7.json'); if (response.ok) { const data = await response.json(); title_data.push(data.t_title); grade_data.push(data.t_grades); getHtml(); } }
fetchData(); 异步函数fetchData。它使用了ES6中的async/await语法来处理异步操作。在函数中，它首先使用fetch方法获取一个名为G7.json的文件。如果获取成功，它会将文件中的数据解析为JSON格式。
function setEditable(arr) { //arr 表示可编辑的单元格 // editable 设置单元格可编辑性 var strow = stutable.rows.length// 获取表格行数 for (let i = 1; i < strow; i++) { let stcell = stutable.rows[i].cells // 获取表格列数 // console.log(stcell); arr.forEach(function (item) { if(stcell[item]) { stcell[item].setAttribute("name", "editable") } }) } setCellCilck() }
它接受一个数组作为参数，表示可编辑的单元格。函数中使用了一个for循环来遍历表格的每一行，然后使用一个forEach循环来遍历可编辑单元格的数组。如果当前单元格是可编辑的，就给它设置一个名为"editable"的属性
function delRow() { for (const btn of delbtns) { btn.addEventListener("click", function() { const row = this.parentNode.parentNode; const rowIndex = row.rowIndex - 1; stutable.deleteRow(rowIndex + 1); const id = row.children[0].textContent; grade_data.forEach(item => { const index = item.findIndex(obj => obj.id === id); if (index !== -1) { item.splice(index, 1); console.log("当前数据已删除"); } }); }); } }
函数用于删除表格中的一行数据。函数中使用了一个for循环来遍历所有的删除按钮，然后为每个按钮添加了一个点击事件监听器。当用户点击某个删除按钮时，该事件监听器会执行一些操作，包括获取该按钮所在行的索引、从表格中删除该行、从数据数组中删除该行对应的数据等。
