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"文件，并在其中编写相应的程序来保存数据。
相关文章：
HTML页面模拟了一个类似Excel的表格在线diy修改表格内容
html实现在线表格编辑，可以修改每个表格内容，并且可以添加行和列 这个HTML页面模拟了一个类似Excel的表格，可以添加和删除行和列，并且可以编辑每个表格的内容。通过点击按钮可以添加新的行和列，通过按钮可以删除最后一…...
Unity如何保存场景，如何导出工程文件/如何查看保存位置？【各版本通用】
如何保存场景？ 在unity中CtrlS 或者File—>Save 输入你要保存的场景名【建议保存在Scenes文件夹下】 下图，保存场景不在Scenes文件夹下： 下图，保存在Scenes文件夹下： 下图，保存完成 如何导出工程文…...
2023年第十六届山东省职业院校技能大赛中职组“网络安全”赛项规程
第十六届山东省职业院校技能大赛 中职组“网络安全”赛项规程 一、赛项名称 赛项名称：网络安全 英文名称：Cyber Security 赛项组别：中职组 专业大类：电子与信息大类 二、竞赛目的 网络空间已经成为陆、海、空、天之后的第…...
html菜单的基本制作
前面写过一点网页菜单的博文；下面再复习一些技术要点； <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns"http://www.w3.…...
Spark Job优化
1 Map端优化 1.1 Map端聚合 map-side预聚合，就是在每个节点本地对相同的key进行一次聚合操作，类似于MapReduce中的本地combiner。map-side预聚合之后，每个节点本地就只会有一条相同的key，因为多条相同的key都被聚合起来了。其他节…...
CSS花边001：无衬线字体和有衬线字体
网站中我们看到过很多字体，样子各有千秋。通常针对结构，区分为有衬字体（serif） 和无衬字体（sans-serif）。今天我们聊一下这个话题。 什么是有衬字体，什么是无衬字体？ 衬线字体&…...
nodejs+vue＋python＋PHP＋微信小程序-安卓- 基于小程序的高校后勤管理系统-计算机毕业设计
考虑到实际生活中在高校后勤管理小程序管理方面的需要以及对该系统认真的分析,将系统权限按管理员和用户这两类涉及用户划分。任何系统都要遵循系统设计的基本流程，本系统也不例外，同样需要经过市场调研，需求分析，概要设计&#x…...
Leetcode153. Find Minimum in Rotated Sorted Array
旋转数组找最小值 其中数组中的值唯一 你可以顺序遍历，当然一般会让你用二分来搞 方法1 数组可以分成两部分，左边是 ≥ n u m s [ 0 ] \ge nums[0] ≥nums[0], 右边是 < n u m s [ 0 ] <nums[0] <nums[0] 换句话说就是找第一个 < n u m s…...
为什么要用“交叉熵”做损失函数
大家好啊，我是董董灿。 今天看一个在深度学习中很枯燥但很重要的概念——交叉熵损失函数。 作为一种损失函数，它的重要作用便是可以将“预测值”和“真实值(标签)”进行对比，从而输出 loss 值，直到 loss 值收敛，可以…...
【Android】Android apk 逆向编译
链接：https://pan.baidu.com/s/14r5s9EJwQgeLK5cCb1Gq1Q 提取码：qdqt 解压jadx 在 lib 文件内找到 jadx-gui-1.4.7.jar 打开cmd 执行 ：java -jar jadx-gui-1.4.7.jar示列：...
04-详解SpringBoot自动装配的原理,依赖属性配置的实现,源码分析
自动装配原理 依赖属性配置 提供Bean用来封装配置文件中对应属性的值 Data public class Cat {private String name;private Integer age; }Data public class Mouse {private String name;private Integer age; }cartoon:cat:name: "图多盖洛"age: 5mouse:name: …...
[100天算法】-不同路径 III（day 73）
题目描述 在二维网格 grid 上，有 4 种类型的方格：1 表示起始方格。且只有一个起始方格。 2 表示结束方格，且只有一个结束方格。 0 表示我们可以走过的空方格。 -1 表示我们无法跨越的障碍。 返回在四个方向（上、下、左、右&#…...
【c++随笔12】继承
【c随笔12】继承 一、继承1、继承的概念2、3种继承方式3、父类和子类对象赋值转换4、继承中的作用域——隐藏5、继承与友元6、继承与静态成员 二、继承和子类默认成员函数1、子类构造函数 二、子类拷贝构造函数3、子类的赋值重载4、子类析构函数 三、单继承、多继承、菱形继承1…...
Excel中使用数据验证、OFFSET实现自动更新式下拉选项
在excel工作簿中，有两个Sheet工作表。 Sheet1： Sheet2（数据源表）： 要实现Sheet1中的“班级”内容，从数据源Sheet2中获取并形成下拉选项，且Sheet2中“班级”内容更新后，Sheet1中“班…...
Android修行手册 - 可变参数中星号什么作用（冷知识）
点击跳转>Unity3D特效百例点击跳转>案例项目实战源码点击跳转>游戏脚本-辅助自动化点击跳转>Android控件全解手册点击跳转>Scratch编程案例点击跳转>软考全系列 👉关于作者 专注于Android/Unity和各种游戏开发技巧，以及各种资源分享&…...
Python与ArcGIS系列（三）视图缩放
目录 0 简述1 在所有图层中缩放至所选要素2 在单独图层中缩放至所选要素3 改变地图范围0 简述 本篇介绍如何利用arcpy实现缩放视图到所选要素以及改变地图范围功能。 对于以及创建的选择集数据，通常需要进行缩放以更好地显示所选要素，要素缩放可分为两种：第一种是在所有图层…...
[ASP]数据库编辑与管理V1.0
本地测试：需要运行 ASP专业调试工具（自己搜索下载） 默认登陆口令：admin 修改口令：打开index.asp找到第3行把admin"admin"改成其他，如admin"abc123" 程序功能齐全，代码精简…...
MyBatis Plus整合Redis实现分布式二级缓存
MyBatis缓存描述 MyBatis提供了两种级别的缓存， 分别时一级缓存和二级缓存。一级缓存是SqlSession级别的缓存，只在SqlSession对象内部存储缓存数据，如果SqlSession对象不一样就无法命中缓存，二级缓存是mapper级别的缓存ÿ…...
如何帮助 3D CAD 设计师实现远程办公
当 3D CAD 设计师需要远程办公时，他们可能需要更强的远程软件，以满足他们的专业需求。比如高清画质，以及支持设备重定向、多显示器支持等功能。3D CAD 设计师如何实现远程办公？接下来我们跟随 Platinum Tank Group 的故事来了解一…...
如何在 Idea 中修改文件的字符集（如：UTF-8）
以 IntelliJ IDEA 2023.2 (Ultimate Edition) 为例，如下： 点击左上角【IntelliJ IDEA】->【Settings…】，如下图： 从弹出页面的左侧导航中找到【Editor】->【File Encodings】，并将 Global Encoding、Project E…...
模型参数、模型存储精度、参数与显存
模型参数量衡量单位 M：百万（Million） B：十亿（Billion） 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的，但是一个参数所表示多少字节不一定，需要看这个参数以什么…...
解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八
现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet，点击确认后如下提示 最终上报fail 解决方法 内核升级导致，需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...
spring：实例工厂方法获取bean
spring处理使用静态工厂方法获取bean实例，也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下： 定义实例工厂类（Java代码），定义实例工厂（xml），定义调用实例工厂ÿ…...
【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控，故障处理工具
第2章 虚拟机性能监控，故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令：jps [options] [hostid] 功能：本地虚拟机进程显示进程ID（与ps相同），可同时显示主类&#x…...
学校时钟系统，标准考场时钟系统，AI亮相2025高考，赛思时钟系统为教育公平筑起“精准防线”
2025年#高考 将在近日拉开帷幕，#AI 监考一度冲上热搜。当AI深度融入高考，#时间同步 不再是辅助功能，而是决定AI监考系统成败的“生命线”。 AI亮相2025高考，40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕，江西、…...
在Ubuntu24上采用Wine打开SourceInsight
1. 安装wine sudo apt install wine 2. 安装32位库支持，SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库（解决显示问题） sudo apt install fonts-wqy…...
Linux 中如何提取压缩文件 ？
Linux 是一种流行的开源操作系统，它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间，使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的，要在 …...
MacOS下Homebrew国内镜像加速指南（2025最新国内镜像加速）
macos brew国内镜像加速方法 brew install 加速formula.jws.json下载慢加速 🍺 最新版brew安装慢到怀疑人生？别怕，教你轻松起飞！ 最近Homebrew更新至最新版，每次执行 brew 命令时都会自动从官方地址 https://formulae.…...
【Linux】自动化构建-Make/Makefile
前言 上文我们讲到了Linux中的编译器gcc/g 【Linux】编译器gcc/g及其库的详细介绍-CSDN博客 本来我们将一个对于编译来说很重要的工具：make/makfile 1.背景 在一个工程中源文件不计其数，其按类型、功能、模块分别放在若干个目录中，mak…...
华为OD机试-最短木板长度-二分法(A卷,100分)
此题是一个最大化最小值的典型例题， 因为搜索范围是有界的，上界最大木板长度补充的全部木料长度，下界最小木板长度； 即left0,right10^6; 我们可以设置一个候选值x(mid)，将木板的长度全部都补充到x，如果成功…...