原生js实现可编辑表格

FlowerHeap

已于 2022-03-17 16:33:17 修改

阅读量1.7k

点赞数 6

分类专栏： javascript 前端文章标签： javascript html 前端

于 2022-03-15 22:43:59 首次发布

本文链接：https://blog.csdn.net/CSDdas/article/details/123514559

版权

JavaScript HTML CSS 交互设计表格编辑

关键词由CSDN通过智能技术生成

前端同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

javascript

3 篇文章 0 订阅

订阅专栏

原生js实现可编辑表格

效果图

未点击状态

在这里插入图片描述

点击状态

在这里插入图片描述

修改之后

在这里插入图片描述

修改失败：失败后会自动调整为原数

在这里插入图片描述

需求

在网页上创建一个学生信息表格，鼠标点击分数则可以修改，鼠标点击其他地方则进行保存。

html代码

将可编辑的地方绑定上remake类。

<!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" />
    <link rel="stylesheet" href="./index.css">
    <script src="./index.js"></script>
    <title>可编辑表格</title>
  </head>
  <body>
    <div class="table">
      <table border="1" id="miao">
        <caption>
          可编辑表格
        </caption>
        <tr>
          <td>姓名</td>
          <td>语文</td>
          <td>数学</td>
          <td>英语</td>
        </tr>
        <tr>
          <td >小明</td>
          <td class="remake">98</td>
          <td class="remake">89</td>
          <td class="remake">98</td>
        </tr>
        <tr>
          <td>小王</td>
          <td class="remake">20</td>
          <td class="remake">89</td>
          <td class="remake">98</td>
        </tr>
        <tr>
          <td>小李</td>
          <td class="remake">98</td>
          <td class="remake">59</td>
          <td class="remake">98</td>
        </tr>
      </table>
    </div>
  </body>
</html>

CSS代码

*{
    margin: 0;
    padding: 0;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;    
    //flex布局居中
}
caption{
    font-size: 40px;
}
table{
    text-align: center;
    table-layout:fixed;
}
input{
    width: 99%;
    height: 95%;
    text-align: center;
}
td{
    width: 180px;
    height: 90px;
}

JS代码

实现思路：

先获取类名为remake的所有列表标签，存到remake数组中，之后循环remake数组进行每个标签onclick时事件的绑定，绑定上箭头函数。

点击一个分数后，将这个标签的display属性设置为none，在dom树中不再显示，再创建一个td结点，一个input结点，将input结点value值填入之前表格中存的分数。将td结点插入到原位置，原位置通过remake[i]进行寻找，然后再将创建好的input插入到td结点上，作为子节点。

这里的同时使用focus函数进行焦点的获取，点击之后的焦点就在input结点上，则就可以写onblur事件进行焦点失去事件函数的绑定。

焦点失去函数先使用checknum函数进行判断写入值是否合法，如果合法，则先修改原结点的innerHTML，再把刚刚增加的td结点删除掉，此时子节点input也会被删除。再把之前的display值赋为空字符串，则之前的td元素又会被显示。

小技巧如果将display设置成block可能会导致换行问题，inline同样所以最好设置为空字符串也就是""。

window.onload = function () {
    var remake = document.getElementsByClassName("remake");
    for (let i = 0; i < remake.length; i++) {
        remake[i].onclick = () => {
            remake[i].style.display = "none";
            var para = document.createElement("input");
            var ctd = document.createElement("td");
            para.value = remake[i].innerHTML;
            remake[i].parentNode.insertBefore(ctd, remake[i]);
            ctd.appendChild(para, ctd);
            para.focus();
            para.onblur = () => {
                if (checknum(Number(para.value))) {
                    remake[i].innerHTML = Number(para.value);
                    remake[i].parentNode.removeChild(ctd);
                    remake[i].style.display = ""
                } else {
                    alert("输入有误！");
                    remake[i].parentNode.removeChild(ctd);
                    remake[i].style.display = "";
                }

            }
        }
    }
    //此函数判断分数是否合法
    var checknum = function (num) {
        let sum = Number(num);
        if (sum >= 0 && sum <= 100) {
            return true;
        } else {
            return false;
        }
    }
}