HTML页面模拟了一个类似Excel的表格在线diy修改表格内容

 html实现在线表格编辑,可以修改每个表格内容,并且可以添加行和列

这个HTML页面模拟了一个类似Excel的表格,可以添加和删除行和列,并且可以编辑每个表格的内容。通过点击按钮可以添加新的行和列,通过按钮可以删除最后一行和最后一列。每个单元格都可以通过直接点击并编辑来修改内容。

实现代码 

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Excel-like Table</title><style>table {border-collapse: collapse;table-layout: fixed;width: 100%;}th, td {border: 1px solid black;padding: 5px;text-align: center;}.addRow, .addColumn, .deleteRow, .deleteColumn {margin-bottom: 10px;}button {padding: 5px 10px;}</style>
</head>
<body>
<div><button class="addRow" onclick="addRow()">添加行</button><button class="addColumn" onclick="addColumn()">添加列</button><button class="deleteRow" onclick="deleteRow()">删除行</button><button class="deleteColumn" onclick="deleteColumn()">删除列</button><button class="saveData" onclick="saveData()">保存数据</button>
</div>
<table id="excelTable"><thead><tr><th contenteditable="true"></th><th contenteditable="true">A</th><th contenteditable="true">B</th><th contenteditable="true">C</th><th contenteditable="true">D</th></tr></thead><tbody><tr><th contenteditable="true">1</th><td contenteditable="true"></td><td contenteditable="true"></td><td contenteditable="true"></td><td contenteditable="true"></td></tr><tr><th contenteditable="true">2</th><td contenteditable="true"></td><td contenteditable="true"></td><td contenteditable="true"></td><td contenteditable="true"></td></tr><tr><th contenteditable="true">3</th><td contenteditable="true"></td><td contenteditable="true"></td><td contenteditable="true"></td><td contenteditable="true"></td></tr><tr><th contenteditable="true">4</th><td contenteditable="true"></td><td contenteditable="true"></td><td contenteditable="true"></td><td contenteditable="true"></td></tr></tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>function addRow() {var table = document.getElementById("excelTable");var row = table.insertRow(-1);var rowIndex = table.rows.length - 2;var cell0 = row.insertCell(0);cell0.innerHTML = rowIndex;cell0.contentEditable = true;for (var i = 1; i < table.rows[1].cells.length; i++) {var cell = row.insertCell(i);cell.contentEditable = true;}}function addColumn() {var table = document.getElementById("excelTable");for (var i = 0; i < table.rows.length; i++) {var cell = table.rows[i].insertCell(-1);cell.contentEditable = true;if (i === 0) {var columnIndex = table.rows[i].cells.length - 2;cell.innerHTML = String.fromCharCode(65 + columnIndex);cell.contentEditable = true;}}}function deleteRow() {var table = document.getElementById("excelTable");if (table.rows.length > 2) {table.deleteRow(-1);}}function deleteColumn() {var table = document.getElementById("excelTable");if (table.rows[0].cells.length > 2) {for (var i = 0; i < table.rows.length; i++) {table.rows[i].deleteCell(-1);}}}function saveData() {var tableData = [];var table = document.getElementById("excelTable");var tableHeaders = [];for (var i = 0; i < table.rows[0].cells.length; i++) {tableHeaders.push(table.rows[0].cells[i].innerHTML);}tableData.push(tableHeaders);for (var i = 1; i < table.rows.length; i++) {var rowData = [];for (var j = 0; j < table.rows[i].cells.length; j++) {rowData.push(table.rows[i].cells[j].innerHTML);}tableData.push(rowData);}$.ajax({url: "test5.php",type: "POST",data: { tableData: JSON.stringify(tableData) },success: function(response) {alert("Data saved successfully!");}});}
</script>
</body>
</html>

使用ajax请求将这个数组传递给名为".php"的文件进行处理。 注意,你需要自己创建一个".php"文件,并在其中编写相应的程序来保存数据。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/137981.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

力扣第583题 两个字符串的删除操作 c++ 动态规划 附Java代码

题目 583. 两个字符串的删除操作 中等 相关标签 字符串 动态规划 给定两个单词 word1 和 word2 &#xff0c;返回使得 word1 和 word2 相同所需的最小步数。 每步 可以删除任意一个字符串中的一个字符。 示例 1&#xff1a; 输入: word1 "sea", word2 &q…

机器学习模型超参数优化最常用的5个工具包!

优化超参数始终是确保模型性能最佳的关键任务。通常&#xff0c;网格搜索、随机搜索和贝叶斯优化等技术是主要使用的方法。 今天分享几个常用于模型超参数优化的 Python 工具包&#xff0c;如下所示&#xff1a; scikit-learn&#xff1a;使用在指定参数值上进行的网格搜索或…

关灯游戏及扩展

7.8 图形界面应用案例——关灯游戏 题目&#xff1a; [案例]游戏初步——关灯游戏。 关灯游戏是很有意思的益智游戏&#xff0c;玩家通过单击关掉(或打开)一盏灯。如果关(掉&#xff08;或打开)一个电灯&#xff0c;其周围(上下左右)的电灯也会触及开关&#xff0c;成…

JSON可视化管理工具JSON Hero

本文软件由网友 zxc 推荐&#xff1b; 什么是 JSON Hero &#xff1f; JSON Hero 是一个简单实用的 JSON 工具&#xff0c;通过简介美观的 UI 及增强的额外功能&#xff0c;使得阅读和理解 JSON 文档变得更容易、直观。 主要功能 支持多种视图以便查看 JSON&#xff1a;列视图…

css:clip元素裁剪实现Loading加载效果边框

clip 属性定义了元素的哪一部分是可见的。clip 属性只适用于 position:absolute 的元素。 警告&#xff1a; 这个属性已被废弃。建议使用 clip-path 文档 https://developer.mozilla.org/zh-CN/docs/Web/CSS/cliphttps://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path …

liunx系统目录结构

列出目录 ls -l bin 二进制文件 boot 启动liunx的一些核心文件 dev 外部设备liunx的 etc 存放系统管理的配置文件和子目录都在这里面 home 家目录 lib 动态链接库 windows中的dll lostfound 一般为空 非法关机 存放文件 media 自带识别设备 识别挂载…

Linux安装MySQL8.0服务

Linux安装MySQL8.0服务 文章目录 Linux安装MySQL8.0服务一、卸载1.1 查看mariadb1.2 卸载 二、安装2.1 下载2.2 上传2.3 解压2.4 重命名2.5 删除2.6 创建目录2.7 环境变量2.8 修改配置2.9 配置文件2.9 用户与用户组2.10 初始化2.11 其它 三、开启远程连接MySQL 一、卸载 首先第…

安卓常见设计模式10------责任链模式(Kotlin版)

1. W1 是什么&#xff0c;什么是责任链模式&#xff1f;​ 责任链模式&#xff08;Chain of Responsibility Pattern&#xff09;是一种行为型设计模式&#xff0c;它用于将请求的发送者和接收者解耦&#xff0c;并将请求沿着一个处理链进行传递&#xff0c;直到有一个处理者能…

Hive 知识点八股文记录 ——(二)优化

函数 UDF&#xff1a;用户定义函数 UDAF&#xff1a;用户定义聚集函数 UDTF&#xff1a;用户定义表生成函数 建表优化 分区建桶 创建表时指定分区字段 PARTITIONED BY (date string)指定分桶字段和数量 CLUSTERED BY (id) INTO 10 BUCKETS插入数据按分区、分桶字段插入 …

【数据结构】树与二叉树(八):二叉树的中序遍历(非递归算法NIO)

文章目录 5.2.1 二叉树二叉树性质引理5.1&#xff1a;二叉树中层数为i的结点至多有 2 i 2^i 2i个&#xff0c;其中 i ≥ 0 i \geq 0 i≥0。引理5.2&#xff1a;高度为k的二叉树中至多有 2 k 1 − 1 2^{k1}-1 2k1−1个结点&#xff0c;其中 k ≥ 0 k \geq 0 k≥0。引理5.3&…

【postgresql】CentOS7 安装pgAdmin 4

CentOS7 安装PostgreSQL Web管理工具pgAdmin 4。 pgAdmin 是世界上最先进的开源数据库 PostgreSQL 最受欢迎且功能丰富的开源管理和开发平台。 下载地址&#xff1a; pgadmin-4 download pgAdmin 4分为桌面版和服务器版。 我们这里部署服务器版本。 安装RPM包。 安装源 s…

现在学编程还能够月薪过万吗?

当我们谈到职业选择时&#xff0c;一项常受人关注的问题是&#xff0c;现在学编程还能月薪过万吗&#xff1f;这似乎是一个不断挂在年轻人嘴边的问题&#xff0c;尤其是在数字化时代&#xff0c;编程的需求越来越大。 所以今天让我们一起探讨这个问题&#xff0c;看看现实生活…

聊聊logback的ShutdownHook

序 本文主要研究一下logback的ShutdownHook ShutdownHook ch/qos/logback/core/hook/ShutdownHook.java /*** Interface describing a logback shutdown hook implementation* * author Mike Reinhold*/ public interface ShutdownHook extends Runnable, ContextAware { }…

汽车标定技术(九)--标定常量与#pragma的趣事

目录 1. 不添加#pragma语句 2. 添加#pragma语句 3. 标定量只给flash空间&#xff0c;不给ram指定空间 4. 总结 在之前不会使用overlay机制的时候&#xff0c;我们想要做汽车标定&#xff0c;标定常量编译出来的地址一般都应该是ram的地址&#xff0c;而且在链接文件中都会指…

6.5对称二叉树(LC101-E)

算法&#xff1a; 其实就是比较左右子树是否可以翻转 比较的时候&#xff1a; 比较外面的节点是否相等&#xff0c;如示例1中的节点3 比较里面的节点是否相等&#xff0c;如示例1中的节点4 基本思路是这样的&#xff0c;那怎么遍历呢&#xff1f; 二叉树的题一定要掌握到…

更安全的ssh协议与Gui图形化界面使用

目录 前言&#xff1a; 一.Gui图形化界面的使用 二.ssh协议 SSH的主要作用包括&#xff1a; 相比其他网络协议&#xff0c;SSH的优势包括&#xff1a; 三.idea集成Git 前言&#xff1a; 上一篇讲解了git的命令用法以及https协议&#xff0c;但是这个协议放在做团队项目的…

Git系列之Git集成开发工具及git扩展使用

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是君易--鑨&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的博客专栏《Git实战开发》。&#x1f3af;&#x1f3af; &a…

我的月光宝盒初体验失败了

哈哈哈&#xff0c;我爱docker, docker 使我自由&#xff01;&#xff01;&#xff01; docker make me free! 菠萝菠萝蜜口号喊起来。 https://github.com/vivo/MoonBox/ windows上安装好了docker之后&#xff0c;docker-compose是自带的。 docker-compose -f docker-compo…

Springboot整合Jedis实现单机版或哨兵版可切换配置

Springboot整合Jedis实现单机版或哨兵版可切换配置 前言实现最后 前言 前文写到借助redis实现Shiro实现session限制登录数量踢人下线&#xff0c;本文就写一下Jedis的配置&#xff0c;可切换单机版和集群哨兵版&#xff0c;方便开发测试。 实现 很简单&#xff0c;直接上代码&…

王学岗visibility改变后调用onLayout()

自定义控件的时候发现了一个bug。 Button位移动画执行结束后我设置了一个不相关的TextView的可见性由gone变为visible.令人郁闷的是&#xff0c;只要我注释的地方放开。动画执行结束后button都会重新绘制在位移动画开始的位置。注释掉这段代码就正常。 经过分析后得知 View的Vi…