可编辑表格html+css+js

最新推荐文章于 2024-07-25 11:26:35 发布
最新推荐文章于 2024-07-25 11:26:35 发布
阅读量449 收藏 4
点赞数
文章标签： html javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a3356418578/article/details/130631221
版权

我是利用的json导入的数据，并可对相应的数据在表格中增删改

JSON

{
  "students": [
    {
      "id": 202301,
      "name": "张三",
      "english": 88,
      "math": 99,
      "chinese": 100
    },
    {
      "id": 202302,
      "name": "李四",
      "english": 73,
      "math": 69,
      "chinese": 90
    }
  ]
}

HTML(采取表头固定的方式）

<div class="warpper" style="text-align: center">
      <label for="studentName">姓名:</label>
      <input type="text" id="studentName" name="studentName" required />
      <label for="english">英语:</label>
      <input type="text" id="english" name="english" required />
      <label for="math">数学:</label>
      <input type="text" id="math" name="math" required />
      <label for="chinese">语文:</label>
      <input type="text" id="chinese" name="chinese" required />
      <button id="increase">新增</button>
      <table class="myTable" id="myTable">
        <thead>
          <th>学号</th>
          <th>姓名</th>
          <th>英语</th>
          <th>数学</th>
          <th>语文</th>
          <th>总分</th>
          <th>删除</th>
        </thead>
      </table>
    </div>

JS

const idReg = "^\\d{3}$";
    const nameReg = "^[\\u4e00-\\u9fa5]{2,4}$";
    const gradReg = "^([0-9]{1,2}|100)$";
    const myTable = document.getElementById("myTable");

    const instance = axios.create({
      baseURL: "http://localhost:3000/students",
      timeout: 10000,
    });

    const thead = myTable.querySelector("thead");
    console.log(thead);

    // 查询渲染信息
    function getData() {
      instance
        .get("")
        .then((res) => {
          const studentsData = res.data;
          console.log(res.data);
          let studentsList = "";
          for (let student of studentsData) {
            const rowData =
              `<tr>` +
              `<td contenteditable='true' data-reg='${idReg}'>${student.id}</td>` +
              `<td contenteditable='true' data-reg='${nameReg}'>${student.name}</td>` +
              `<td contenteditable='true' data-reg='${gradReg}'>${student.english}</td>` +
              `<td contenteditable='true' data-reg='${gradReg}'>${student.math}</td>` +
              `<td contenteditable='true' data-reg='${gradReg}'>${student.chinese}</td>` +
              `<td id="total">${
                student.chinese + student.math + student.english
              }</td>` +
              `<td><button  class='deleteBtn' id="${student.id}">删除</button></td>` +
              `</tr>`;
            studentsList += rowData;
          }
          myTable.innerHTML += studentsList;
          Delete();
        })
        .catch((error) => {
          console.log(error);
        });
    }
    getData();

    // 修改数据

    myTable.addEventListener(
      "click",
      function (e) {
        const td = e.target;
        const total = td.parentNode.childNodes[5];
        const reg = new RegExp(td.dataset.reg);
        if (td.tagName === "TD") {
          const text = td.innerHTML;
          td.innerHTML = "";
          const input = document.createElement("input");
          input.type = "text";
          input.style.border = "none";
          input.style.outline = "none";
          input.style.textAlign = "center";
          input.style.width = "110px";
          input.style.height = "48px";
          input.style.fontSize = "16px";
          input.value = text;
          td.appendChild(input);
          input.focus();
          input.addEventListener(
            "blur",
            (e) => {
              const input = e.target;
              const newValue = input.value;
              if (reg.test(newValue)) {
                td.innerHTML = newValue;
                total.innerHTML =
                  parseInt(total.innerHTML) +
                  parseInt(newValue) -
                  parseInt(text);
                instance.post;
              } else {
                alert("不符合");
                td.innerHTML = text;
              }
            },
            false
          );
        }
      },
      false
    );

    // 删除数据

    function Delete() {
      const delButtons = document.querySelectorAll(".deleteBtn");
      delButtons.forEach((one) => {
        one.addEventListener("click", function (event) {
          const id = event.target.getAttribute("id");
          instance
            .delete(`/${id}`)
            .then((res) => {
              console.log(res.data);
              getData();
            })
            .catch((err) => {
              console.error(err);
            });
        });
      });
    }

    //增加数据
    const increase = document.getElementById("increase");
    increase.addEventListener("click", (e) => {
      const studentName = document.getElementById("studentName").value;
      const english = document.getElementById("english").value;
      english > 0 && english <= 100 ? english : (english = 0);
      const math = document.getElementById("math").value;
      math > 0 && math <= 100 ? math : (math = 0);
      const chinese = document.getElementById("chinese").value;
      chinese > 0 && chinese <= 100 ? chinese : (chinese = 0);
      instance
        .post("/", {
          name: String(studentName),
          english: Number(english),
          math: Number(math),
          chinese: Number(chinese),
        })
        .then((res) => {
          console.log(res.data);
          getData();
        })
        .catch((err) => {
          console.error(err);
        });
    });

整体如下

<!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" />
    <title>Document</title>
    <script src="axios.js"></script>
    <style>
      .warpper {
        position: relative;
        margin-top: 10%;
      }

      .myTable {
        table-layout: fixed;
        width: 0;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        border: 1px solid #000;
        border-collapse: collapse;
      }

      th {
        background-color: #ffd220;
      }

      input {
        background-color: greenyellow;
      }

      th,
      td {
        width: 120px;
        height: 50px;
        text-align: center;
        border: 1px solid #000;
        font-size: 16px;
      }
    </style>
  </head>

  <body>
    <div class="warpper" style="text-align: center">
      <label for="studentName">姓名:</label>
      <input type="text" id="studentName" name="studentName" required />
      <label for="english">英语:</label>
      <input type="text" id="english" name="english" required />
      <label for="math">数学:</label>
      <input type="text" id="math" name="math" required />
      <label for="chinese">语文:</label>
      <input type="text" id="chinese" name="chinese" required />
      <button id="increase">新增</button>
      <table class="myTable" id="myTable">
        <thead>
          <th>学号</th>
          <th>姓名</th>
          <th>英语</th>
          <th>数学</th>
          <th>语文</th>
          <th>总分</th>
          <th>删除</th>
        </thead>
      </table>
    </div>
  </body>
  <script>
    // 验证规则
    const idReg = "^\\d{3}$";
    const nameReg = "^[\\u4e00-\\u9fa5]{2,4}$";
    const gradReg = "^([0-9]{1,2}|100)$";
    const myTable = document.getElementById("myTable");

    const instance = axios.create({
      baseURL: "http://localhost:3000/students",
      timeout: 10000,
    });

    const thead = myTable.querySelector("thead");
    console.log(thead);

    // 查询渲染信息
    function getData() {
      instance
        .get("")
        .then((res) => {
          const studentsData = res.data;
          console.log(res.data);
          let studentsList = "";
          for (let student of studentsData) {
            const rowData =
              `<tr>` +
              `<td contenteditable='true' data-reg='${idReg}'>${student.id}</td>` +
              `<td contenteditable='true' data-reg='${nameReg}'>${student.name}</td>` +
              `<td contenteditable='true' data-reg='${gradReg}'>${student.english}</td>` +
              `<td contenteditable='true' data-reg='${gradReg}'>${student.math}</td>` +
              `<td contenteditable='true' data-reg='${gradReg}'>${student.chinese}</td>` +
              `<td id="total">${
                student.chinese + student.math + student.english
              }</td>` +
              `<td><button  class='deleteBtn' id="${student.id}">删除</button></td>` +
              `</tr>`;
            studentsList += rowData;
          }
          myTable.innerHTML += studentsList;
          Delete();
        })
        .catch((error) => {
          console.log(error);
        });
    }
    getData();

    // 修改数据

    myTable.addEventListener(
      "click",
      function (e) {
        const td = e.target;
        const total = td.parentNode.childNodes[5];
        const reg = new RegExp(td.dataset.reg);
        if (td.tagName === "TD") {
          const text = td.innerHTML;
          td.innerHTML = "";
          const input = document.createElement("input");
          input.type = "text";
          input.style.border = "none";
          input.style.outline = "none";
          input.style.textAlign = "center";
          input.style.width = "110px";
          input.style.height = "48px";
          input.style.fontSize = "16px";
          input.value = text;
          td.appendChild(input);
          input.focus();
          input.addEventListener(
            "blur",
            (e) => {
              const input = e.target;
              const newValue = input.value;
              if (reg.test(newValue)) {
                td.innerHTML = newValue;
                total.innerHTML =
                  parseInt(total.innerHTML) +
                  parseInt(newValue) -
                  parseInt(text);
                instance.post;
              } else {
                alert("不符合");
                td.innerHTML = text;
              }
            },
            false
          );
        }
      },
      false
    );

    // 删除数据

    function Delete() {
      const delButtons = document.querySelectorAll(".deleteBtn");
      delButtons.forEach((one) => {
        one.addEventListener("click", function (event) {
          const id = event.target.getAttribute("id");
          instance
            .delete(`/${id}`)
            .then((res) => {
              console.log(res.data);
              getData();
            })
            .catch((err) => {
              console.error(err);
            });
        });
      });
    }

    //增加数据
    const increase = document.getElementById("increase");
    increase.addEventListener("click", (e) => {
      const studentName = document.getElementById("studentName").value;
      const english = document.getElementById("english").value;
      english > 0 && english <= 100 ? english : (english = 0);
      const math = document.getElementById("math").value;
      math > 0 && math <= 100 ? math : (math = 0);
      const chinese = document.getElementById("chinese").value;
      chinese > 0 && chinese <= 100 ? chinese : (chinese = 0);
      instance
        .post("/", {
          name: String(studentName),
          english: Number(english),
          math: Number(math),
          chinese: Number(chinese),
        })
        .then((res) => {
          console.log(res.data);
          getData();
        })
        .catch((err) => {
          console.error(err);
        });
    });
  </script>
</html>

实现效果

 

a3356418578
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html+css+javascript知识点总结
hholy124的博客
08-12 3174
html+css+javascript知识点总结
javascript+css仿excel表格效果
03-20
最后，压缩包中的“表格变色”可能是指一个示例，演示了如何通过JavaScript和CSS实现单元格颜色随数据变化的功能。这通常涉及到数据驱动的CSS类切换，例如，当单元格值达到特定条件时，JavaScript会添加一个预定义的...
前端（HTML + CSS + JS）
wuweixiaoyue的博客
11-24 2939
CSS可以控制页面的展示效果，HTML决定页面结构。
html table+css实现可编辑表格
xingdiango的博客
12-21 2103
在上述示例中，使用了 contenteditable 属性来使表格单元格可编辑。添加 contenteditable="true" 属性的单元格可以被鼠标点击并接受用户输入。JavaScript 部分遍历表格的所有单元格，并为每个单元格添加输入事件侦听器。在输入事件处理程序中，你可以根据需要处理用户的输入，比如更新数据或触发其他操作。要实现可编辑的 HTML 表格，你可以使用 JavaScript 和 HTML5 的 contenteditable 属性。
html css表格编辑,Css+JS模拟实现可编辑的表格
weixin_28966407的博客
06-15 586
表格在未编辑状态和编辑状态，需要定义两个不同的样式。比如未编辑状态是lable的样式，两边有两个括号[]，表示该表格可以编辑；编辑中的表格则表示成一个input框，可以输入。基本思路就是，在表格中直接放可输入的input标签，在未编辑的时候，利用css样式，把input标签模拟成不可编辑的lable样式。实现代码。CSS.edit-marker {position: relative;}.edit...
一文搞懂HTML+CSS+JavaScript
weixin_43887883的博客
08-31 6421
#HTML超文本标记语言 1、定义 HTML的全称为超文本标记语言（Hyper Text Markup Language），是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接（超文本：不止文本）等。超文本标记语言是标准通用标记语言下的一个应用，是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，
【狂神说】HTML+CSS+JS
weixin_56580267的博客
07-06 5994
html+css+js从小白到入门
HTML+CSS
weixin_52002028的博客
07-20 1985
之前学过html+css，但是好久没用，最近看着文档复习了一下，也记录了一些笔记。
HTML5+CSS+JS
iku_whf的博客
01-07 942
软件和文件内容的格式 HBuilder X 格式 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 关于网页的一些属性 --> <!-- css样式 --> </head> <body> <!-- 主体内容 --> </body> </
html+css+javascript 大数据科技登录界面模板html
qq_365392777
08-19 7736
大数据科技登录界面模板html 原始HTML+CSS+JS页面设计,这是一个不错的登录网页制作，画面精明，非常适合初学者学习使用。 作品介绍 1.网页作品简介方面 ：蓝色科技风格后台登录框，科幻的网站后台系统登录界面模板下载, 文章页支持手机PC响应式布局。 2.网页作品编辑方面：此作品为登录页面设计题材，HTML+CS...
jQuery+PureCSS可编辑表格插件
06-10
**jQuery+PureCSS可编辑表格插件** 这款插件结合了jQuery的动态功能和PureCSS的简洁设计，为网页开发者提供了一种简单易用的可编辑表格解决方案。它允许用户直接在表格中编辑数据，提高了交互性和用户体验。下面将...
js+html实现的Table可编辑
04-26
在实现可编辑表格时，我们需要在用户点击单元格时将`<td>`元素替换为`<input>`或`<textarea>`，并在用户完成编辑后将数据保存回`<td>`。这可能涉及到`innerHTML`属性、`createElement`、`appendChild`等方法。 4. *...
html+css仿静态淘宝页面
11-02
【HTML+CSS 仿静态淘宝页面】是一个针对初学者的前端开发项目，旨在通过实践学习HTML和CSS的基础知识。在这个项目中，开发者将尝试模仿淘宝网站的静态界面，以理解和掌握网页布局、样式设计以及元素交互的基本原理。...
jQuery+PureCSS可编辑表格插件.zip
09-22
《jQuery+PureCSS可编辑表格插件：打造高效交互体验》 在网页开发中，数据展示和交互性是至关重要的元素。jQuery与PureCSS结合的可编辑表格插件，为开发者提供了一种高效且灵活的方式来实现这一目标。该插件通过...
基于 HTML+ECharts 实现的大数据可视化平台模板（含源码）
柯晓楠
07-24 3292
大数据的可视化对于企业决策、市场分析和业务洞察至关重要。通过直观的数据展示，团队可以快速理解复杂的数据模式，发现潜在的业务机会。本文将详细介绍如何利用 HTML 和 ECharts 实现一个功能丰富的大数据可视化平台模板。
[HTML]一文掌握
CSDN20221005的博客
07-21 997
场景：在网页的底部导航中通常会用到。语法：dl>dt>dd特点：dd前会默认显示缩进效果注意：dl中只允许包含dt/dd标签dt/dd中可以包含任意内容。
基于 HTML+ECharts 实现的数据可视化大屏案例（含源码）
柯晓楠
07-24 716
数据可视化已成为企业决策和业务分析的重要工具。通过直观、动态的图表展示，数据可视化大屏能够帮助用户快速理解复杂的数据关系，发现潜在的业务趋势。本文将介绍如何利用 HTML 和 ECharts 实现一个功能丰富的数据可视化大屏案例。
html实现酷炫美观的可视化大屏(十种风格示例，附源码)
最新发布
xcLeigh
07-25 2020
html实现酷炫美观的可视化大屏(十种风格示例，附源码)，大屏源码，可视化大屏模板源码，html可视化大屏源码下载，内含十种不同风格的大屏可视化代码，详细的讲解，酷炫的线条，美观的设计，让图文图表结合的更融洽。兼容各种大屏，调整页面到合适的分辨率，F12全屏观看。各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值