可编辑表格详解

原创已于 2023-04-11 23:49:36 修改 · 244 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

于 2023-04-11 23:42:47 首次发布

该代码示例展示了如何使用HTML、CSS和JavaScript创建一个可编辑的成绩表格。用户点击单元格时可以编辑成绩，输入验证确保成绩有效，同时更新总分。错误处理功能会在输入错误时显示提示。

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