1.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>table</title>
</head>
<link rel="stylesheet" href="table.css"><body><div id="tableBox"><h2 class="title">可编辑表格</h2><div class="err">成绩输入有误,请重新输入!</div><table class="table"><thead><tr><th>学号</th><th>姓名</th><th>语文</th><th>数学</th><th>英语</th><th>总分</th></tr></thead><tbody><tr><td>1101</td><td>小王</td><td name="grade">98</td><td name="grade">80</td><td name="grade">91</td><td rname="allgrade">269</td></tr><tr><td>1102</td><td>小曾</td><td name="grade">88</td><td name="grade">87</td><td name="grade">92</td><td rname="allgrade">267</td></tr><tr><td>1103</td><td>小赵</td><td name="grade">75</td><td name="grade">90</td><td name="grade">86</td><td rname="allgrade">251</td></tr><tr><td>1104</td><td>小周</td><td name="grade">65</td><td name="grade">81</td><td name="grade">83</td><td rname="allgrade">229</td></tr></tbody></table></div>
</body>
<script src="table.js"></script></html>在表格中，每个学生的姓名、语文、数学和英语成绩都被包含在一个 <td> 元素中，并使用 name 属性标识它们是哪一科的成绩。每个学生的总分也被包含在一个 <td> 元素中，并使用 rname 属性标识它是总分列。
在页面下方，使用 <script> 标签引用了一个 table.js 的 JavaScript 文件。该文件中包含了对表格元素的一些处理逻辑。例如，该 JavaScript 文件可能会将表格中每个学生的成绩相加，计算出他们的总分，并将总分显示在总分列中。
此外，该 JavaScript 文件还可以执行其他一些任务，例如验证用户在表格中输入的成绩是否合法，以及弹出错误消息。总的来说，该代码演示了如何使用 HTML、CSS 和 JavaScript 来创建和操作表格元素。
2.js部分
// 这条代码的含义？
// var stutable = document.getElementsByClassName("table")[0];
var grades = document.getElementsByName("grade");
// why【0】
var thetips = document.getElementsByClassName("err")[0];var trs = document.getElementsByTagName("tr");// 给单元格添加点击事件
function setCellCilck() {for (let i = 0; i < grades.length; i++) {grades[i].onclick = function () {updateCell(this);};}
}
setCellCilck();// 更新单元格内容
function updateCell(ele) {if (document.getElementsByClassName("active-input").length == 0) {var oldhtml = ele.innerHTML;ele.innerHTML = "";// 通过DOM API 创建input元素，设置属性，值，方法var newInput = document.createElement("input");newInput.setAttribute("class", "active-input");newInput.value = oldhtml;newInput.onblur = function () {if (!Number(this.value) || this.value > 100 || this.value < 0) {console.log("err");addAnimate();thetips.style.display = "block";return;} else {thetips.style.display = "none";ele.innerHTML = this.value == oldhtml ? oldhtml : this.value;updateScore();}};newInput.select();ele.appendChild(newInput);newInput.focus();} else {return;}
}// 更新总成绩
// 通过DOM属性来更新总成绩
function updateScore() {for (let n = 1; n < trs.length; n++) {var grade01 =grades[n].parentNode.parentNode.children[n - 1].querySelectorAll("td[name]");var grade02 =grades[n].parentNode.parentNode.children[n - 1].querySelectorAll("td[rname]");var sum = 0;for (let i = 0; i < grade01.length; i++) {sum += parseFloat(grade01[i].innerHTML);for (let j = 0; j < grade02.length; j++) {grade02[j].innerHTML = sum;}}}
}
updateScore();// 添加动画
function addAnimate() {thetips.className = "err movedown";
}
使用document.getElementsByName() 方法，找到了所有 name 属性为 grade 的元素，并将其赋值给了 grades 变量。这里使用 getElementsByName 方法返回了一个包含所有 name 属性为 grade 的元素的数组（就是可修改的区域获取）。
使用 document.getElementsByClassName() 方法找到了 HTML 页面中 class 为 err 的元素，并将其赋值给了 thetips 变量。和第一行一样，使用了 [0] 指定了第一个元素（即错误提示）。
使用了 document.getElementsByTagName() 方法，找到了 HTML 页面中所有的 tr 标签，并将其赋值给了 trs 变量。这里使用 getElementsByTagName 方法返回了一个包含所有 tr 元素的数组。
接下来，该 JavaScript 文件定义了 setCellClick() 方法，用于给表格中的每个成绩单元格添加点击事件。在该方法中，使用了一个 for 循环遍历了 grades 数组，为每个元素设置了单击事件的监听器。单击事件的回调函数是 updateCell() 方法。
updateCell() 方法用于更新单元格的内容。在该方法中，首先判断是否已经有处于编辑状态的单元格，如果没有，则保存原来的内容，并通过 DOM API 创建一个 input 元素并添加到该单元格中。input 元素的初始值为之前的单元格内容，当用户离开该单元格时，如果输入的值不为数字或者超出范围，则弹出错误动画，并保留原来的值不做修改。否则，更新该单元格的内容，并调用 updateScore() 方法更新该行所有学科成绩之和和总成绩。
updateScore() 方法用于更新每一行的总成绩。在该方法中，遍历了 trs 数组中的每一个 tr 标签。对于每一个 tr 标签，找到了该行的所有成绩（td 标签中 name 属性为 grade 的元素）和总成绩（td 标签中 rname 属性为 allgrade 的元素）。然后计算该行所有成绩之和，将结果更新到总成绩单元格（rname 为 allgrade）中。
最后，定义了 addAnimate() 方法用于添加错误动画。在该方法中，修改错误提示元素（即 thetips 变量）的类名，添加了一个 movedown 类，从而触发错误提示的动画效果。
3.css部分
* {margin: 0;padding: 0;--border: 2px solid rgba(121, 121, 121, 1);
}#tableBox {position: relative;user-select: none;
}.table {margin: 0 auto;border-spacing: 0;border-collapse: collapse;text-align: center;margin-top: 47px;z-index: 1;
}.err {display: none;top: 95px;width: 160px;position: absolute;margin-left: -100px;left: 50%;text-align: center;padding: 15px 18px;background: rgb(255, 0, 0);border-radius: 5px;font-size: 13px;font-weight: 600;transition: top 1s;z-index: -1;
}.movedown {top: 95px;animation: movedown 3s;
}@keyframes movedown {0% {top: 95px;}50% {top: 48px;}100% {top: 95px;}
}.title {text-align: center;padding: 8px 0;
}tr,
td,
th {border: var(--border);
}th {font-weight: 600;text-align: center;background-color: rgba(204, 204, 204, 1);
}td > input {width: 100px;height: 45px;border: none;font-size: 16px;outline: none;
}.table > thead > tr > th,
.table > tbody > tr > td {width: 100px;height: 45px;font-size: 16px;
}.table > thead > tr {font-family: "宋体";
}button {color: #fff;background-color: #d9534f;border-color: #d43f3a;user-select: none;border: 1px solid transparent;border-radius: 4px;cursor: pointer;padding: 10px 12px;font-size: 14px;text-align: center;
}
