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;
}