使用纯 JavaScript 实现动态表格的增删改功能教程

程序猿 • 2025年12月22日 19:32:52 • 用户投稿

本教程详细介绍了如何使用纯 JavaScript 在网页中实现动态表格的添加、编辑和删除（CRUD）功能。我们将通过一个实际示例，逐步讲解如何构建交互式表格，特别是修正了编辑功能中常见的将单元格内容转换为可编辑输入框的关键步骤，并提供了完整的代码实现及最佳实践建议。

引言

在现代 web 应用开发中，动态表格操作是常见的需求，例如管理用户列表、商品库存等。本教程将指导您如何仅使用 javascript 来实现对表格行的添加、编辑和删除功能，无需依赖任何后端语言（如 php）。我们将从一个基本的 html 结构开始，逐步完善各项功能，并特别关注编辑功能的实现细节，解决在将静态文本转换为可编辑输入框时可能遇到的问题。

1. 初始 HTML 结构概述

为了演示动态表格操作，我们首先需要一个基本的 HTML 表格结构。本例中，我们将使用 JavaScript 动态生成表格，但实际项目中，表格通常会预先定义在 HTML 中，或通过 AJAX 从服务器加载数据。

            动态表格增删改            table {            width: 100%;            border-collapse: collapse;            margin-top: 20px;        }        th, td {            border: 1px solid #ddd;            padding: 8px;            text-align: left;        }        th {            background-color: #f2f2f2;        }        button {            margin-right: 5px;            padding: 5px 10px;            cursor: pointer;        }        .save {            display: none; /* 初始时隐藏保存按钮 */        }        input[type="text"] {            width: 90%;            padding: 4px;            box-sizing: border-box;        }        动态表格数据管理
    
            // JavaScript 代码将在这里插入

在标签内部，我们将动态生成表格。这里为了简化示例，我们直接使用 document.write。在实际生产环境中，推荐使用 document.createElement 和 appendChild 等 DOM 操作方法，以避免覆盖页面内容。

// 初始表格及数据（使用 document.write 简化演示）document.addEventListener('DOMContentLoaded', function() {    let tableHTML = `                                    ID                 姓名                 地址                 年龄                 操作             
                            1                 Anu                 Colombo                 20                                                                                                          
                                                                                                        
        
`;    document.getElementById('table-container').innerHTML = tableHTML;});

注意： 上述代码将表格内容插入到 table-container div 中，而不是直接使用 document.write 覆盖整个文档，这是一种更推荐的做法。

2. 核心 JavaScript 功能实现

我们将实现 addrow (添加), deleterow (删除), editrow (编辑) 和 saverow (保存) 四个核心功能。

立即学习“Java免费学习笔记（深入）”；

2.1 添加行 (addrow)

addrow 函数负责获取输入框中的新数据，创建一个新的表格行，并将其插入到表格中。

function addrow(){    var new_id = document.getElementById("new_id").value;    var new_name = document.getElementById("new_name").value;    var new_address = document.getElementById("new_address").value;    var new_age = document.getElementById("new_age").value;    if (!new_id || !new_name || !new_address || !new_age) {        alert("所有字段都不能为空！");        return;    }    var mytable = document.getElementById("TABLE");    // 获取当前表格的行数，用于生成新的行ID    // 注意：这里的 t_length 应该考虑表头和添加行本身    var t_length = mytable.rows.length - 1; // 减去“添加新行”的行，确保ID递增    // 创建新的行HTML字符串    var newRowHTML = `                    ${new_id}            ${new_name}            ${new_address}            ${new_age}                                                                                  `;    // 将新行插入到“添加新行”之前    var addRowElement = document.getElementById('add_new_row');    addRowElement.insertAdjacentHTML('beforebegin', newRowHTML);    // 清空输入框    document.getElementById("new_id").value = "";    document.getElementById("new_name").value = "";    document.getElementById("new_address").value = "";    document.getElementById("new_age").value = "";}

2.2 删除行 (deleterow)

deleterow 函数通过事件对象获取被点击按钮的父元素（

），再获取其父元素（），然后从表格中移除该行。

function deleterow(buttonElement) {    var td = buttonElement.parentNode;     var tr = td.parentNode;    tr.parentNode.removeChild(tr);}

注意： 原始代码中的 deleterow() 没有传递参数，依赖全局 event 对象。为了更好的可维护性和兼容性，我们修改为传递按钮元素本身，然后通过 parentNode 属性向上查找。

2.3 编辑行 (editrow)

editrow 函数是本教程的重点，它负责将表格单元格的静态文本内容转换为可编辑的字段。

问题分析： 原始代码中，虽然创建了包含标签的 HTML 字符串，但并没有将其赋值给对应的单元格的 innerHTML，导致页面上没有实际的视觉变化。

解决方案： 在创建完 input 元素的 HTML 字符串后，必须将其赋值给对应的

元素的 innerHTML 属性。

function editrow(x){    // 1. 切换编辑和保存按钮的显示状态    document.getElementById("edit_button"+x).style.display="none";    document.getElementById("save_button"+x).style.display="inline-block"; // 使用 inline-block 以保持按钮在同一行    // 2. 获取当前行的所有单元格元素    var idCell = document.getElementById("id_row"+x);    var nameCell = document.getElementById("name_row"+x);    var addressCell = document.getElementById("address_row"+x);    var ageCell = document.getElementById("age_row"+x);    // 3. 获取当前单元格的文本内容    var id_data = idCell.innerHTML;    var name_data = nameCell.innerHTML;    var address_data = addressCell.innerHTML;    var age_data = ageCell.innerHTML;    // 4. 将文本内容转换为包含输入框的HTML字符串    // 注意：这里为每个输入框设置了唯一的ID，方便后续saverow函数获取值    var id_input_html = "";    var name_input_html = "";    var address_input_html = "";    var age_input_html = "";     // 5. 将生成的输入框HTML字符串赋值给对应的单元格的 innerHTML    // 这是修复原始代码中缺少的核心步骤！    idCell.innerHTML = id_input_html;    nameCell.innerHTML = name_input_html;    addressCell.innerHTML = address_input_html;    ageCell.innerHTML = age_input_html;}

2.4 保存行 (saverow)

saverow 函数负责在用户完成编辑后，从输入框中获取新值，更新表格单元格的文本内容，并将输入框变回静态文本。

function saverow(y){    // 1. 从输入框中获取新值    var id_val = document.getElementById("id_text"+y).value;    var name_val = document.getElementById("name_text"+y).value;    var address_val = document.getElementById("address_text"+y).value;    var age_val = document.getElementById("age_text"+y).value;    // 2. 更新对应单元格的 innerHTML 为新值    document.getElementById("id_row"+y).innerHTML = id_val;    document.getElementById("name_row"+y).innerHTML = name_val;    document.getElementById("address_row"+y).innerHTML = address_val;    document.getElementById("age_row"+y).innerHTML = age_val;    // 3. 切换编辑和保存按钮的显示状态    document.getElementById("edit_button"+y).style.display = "inline-block";    document.getElementById("save_button"+y).style.display = "none";}

3. 完整示例代码

将上述所有 JavaScript 函数整合到 HTML 文件的标签中，即可得到一个完整的、可运行的动态表格增删改示例。

            动态表格增删改            body { font-family: Arial, sans-serif; margin: 20px; }        table {            width: 80%;            border-collapse: collapse;            margin-top: 20px;        }        th, td {            border: 1px solid #ddd;            padding: 8px;            text-align: left;        }        th {            background-color: #f2f2f2;        }        button {            margin-right: 5px;            padding: 5px 10px;            cursor: pointer;            border: 1px solid #ccc;            border-radius: 3px;            background-color: #e0e0e0;        }        button:hover {            background-color: #d0d0d0;        }        .save {            display: none; /* 初始时隐藏保存按钮 */            background-color: #4CAF50;            color: white;            border-color: #4CAF50;        }        .save:hover {            background-color: #45a049;        }        .delete {            background-color: #f44336;            color: white;            border-color: #f44336;        }        .delete:hover {            background-color: #da190b;        }        input[type="text"] {            width: calc(100% - 10px); /* 减去padding和border */            padding: 4px;            box-sizing: border-box;            border: 1px solid #ccc;            border-radius: 3px;        }        #add_new_row td input {            width: calc(100% - 10px);        }        动态表格数据管理
    
            document.addEventListener('DOMContentLoaded', function() {            let tableHTML = `                                                            ID                         姓名                         地址                         年龄                         操作                     
                                            1                         Anu                         Colombo                         20                                                                                                                                                          
                                                                                                                                                                
                
`;            document.getElementById('table-container').innerHTML = tableHTML;        });        function editrow(x){            document.getElementById("edit_button"+x).style.display="none";            document.getElementById("save_button"+x).style.display="inline-block";            var idCell = document.getElementById("id_row"+x);            var nameCell = document.getElementById("name_row"+x);            var addressCell = document.getElementById("address_row"+x);            var ageCell = document.getElementById("age_row"+x);            var id_data = idCell.innerHTML;            var name_data = nameCell.innerHTML;            var address_data = addressCell.innerHTML;            var age_data = ageCell.innerHTML;            var id_input_html = "";            var name_input_html = "";            var address_input_html = "";            var age_input_html = "";             idCell.innerHTML = id_input_html;            nameCell.innerHTML = name_input_html;            addressCell.innerHTML = address_input_html;            ageCell.innerHTML = age_input_html;        }         function saverow(y){            var id_val = document.getElementById("id_text"+y).value;            var name_val = document.getElementById("name_text"+y).value;            var address_val = document.getElementById("address_text"+y).value;            var age_val = document.getElementById("age_text"+y).value;            document.getElementById("id_row"+y).innerHTML = id_val;            document.getElementById("name_row"+y).innerHTML = name_val;            document.getElementById("address_row"+y).innerHTML = address_val;            document.getElementById("age_row"+y).innerHTML = age_val;            document.getElementById("edit_button"+y).style.display = "inline-block";            document.getElementById("save_button"+y).style.display = "none";        }        function deleterow(buttonElement) {            var td = buttonElement.parentNode;             var tr = td.parentNode;            tr.parentNode.removeChild(tr);        }        function addrow(){            var new_id = document.getElementById("new_id").value;            var new_name = document.getElementById("new_name").value;            var new_address = document.getElementById("new_address").value;            var new_age = document.getElementById("new_age").value;            if (!new_id || !new_name || !new_address || !new_age) {                alert("所有字段都不能为空！");                return;            }            var mytable = document.getElementById("TABLE");            var t_length = mytable.rows.length - 1; // 减去“添加新行”的行            var newRowHTML = `                                    ${new_id}                    ${new_name}                    ${new_address}                    <td id='age_row

以上就是使用纯 JavaScript 实现动态表格的增删改功能教程的详细内容，更多请关注php中文网其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1578198.html

ai ajax app html java javascript node php 后端应用开发

打赏

微信扫一扫

支付宝扫一扫

0 0

关于作者

程序猿签约作者

413.8K 文章

0 评论

2 粉丝

这个人很懒，什么都没有留下～

动态UI中CSS自定义属性与直接样式操作的性能权衡与优化

上一篇 2025年12月22日 19:32:42

解决Firefox中CSS动画卡顿与滚动条样式不生效问题

下一篇 2025年12月22日 19:33:02

Android应用中通过下载链接从Firebase Storage下载文件教程

本教程详细介绍了在Android应用中如何利用文件的下载URL，结合Android DownloadManager将Firebase Storage中的文件下载到用户设备指定目录。内容涵盖必要的运行时权限处理、清单文件配置以及DownloadManager的具体使用方法，旨在帮助开发者实现本地文件存…

程序猿
2026年9月24日 • 用户投稿
2000
163邮箱官网手机免费入口 163免费邮箱移动登录

163邮箱官网手机免费入口可通过访问mail.163.com自动跳转至移动版，或在应用商店下载“网易邮箱”App登录，支持多账号管理、邮件收发、附件添加、消息推送及多设备同步，并提供登录保护、主题自定义和垃圾邮件过滤等安全与个性化功能。 163邮箱官网手机免费入口在哪里？这是不少网友都关注的，接下来…

程序猿
2026年9月24日 • 用户投稿
0000
sublime的session文件是做什么用的_sublime会话文件作用与恢复机制

Sublime Text的session文件记录了打开的文件、光标位置、代码折叠状态、窗口布局及未保存内容等信息，位于系统特定目录下的Local文件夹中，以JSON格式存储，通过自动保存机制在重启后恢复编辑状态。 Sublime Text 的 session 文件主要用于保存用户当前编辑环境的状态信…

程序猿
2026年9月24日 • 用户投稿
0000
DeepSeek能不能帮我写代码简单编程任务如何交给DeepSeek完成

很多用户好奇，像DeepSeek这样的AI模型能否帮助完成编程任务，特别是那些相对简单的编程需求。答案是肯定的。DeepSeek具备理解自然语言描述并尝试生成相应代码的能力，这使得它成为完成一些简单编程任务的有力工具。 ☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepS…

程序猿
2026年9月24日 • 用户投稿
1000
用户投稿

ubuntu如何mount网络驱动器

在ubuntu中挂载网络驱动器有多种方法，以下是一些常见的方法：方法一：使用mount命令确定网络驱动器的地址：例如，如果是Samba共享，地址可能是smb://server/share。如果是NFS共享，地址可能是nfs://server/share。安装必要的软件包：对于Samba共享，安装…

程序猿
2026年9月24日
0000
Java中双精度浮点数的小数位控制技巧

本文深入探讨了在Java中有效控制double类型数值小数位数的方法。通过Math.round()函数结合乘除操作，可以实现数值本身的四舍五入并改变其精度；而String.format()则提供了灵活的字符串格式化功能，用于在不修改原始数值的情况下精确控制显示的小数位数。这两种方法分别适用于不同的业…

程序猿
2026年9月24日 • 用户投稿
0000
Steam新游周报：经典恐怖游戏新作登场！

十一国庆前的最后一周，Steam上又有许多令人兴奋的新作发布！本周策略玩家与模拟建设玩家有福了，将有数款新作等着你们，体育爱好者们则能玩到EA一款足球年货游戏，而本周黑马则是一款来自科乐美的经典日式恐怖游戏。让我们进入这周的新游周报吧！周一（9月22日）名望（抢先体验） Steam商店页面：名望…

程序猿
2026年9月24日 • 用户投稿
0000
用户投稿

高质量免费logo设计网站国产免费logo生成工具推荐

国产免费Logo设计网站推荐即时设计、DesignEvo、牛人设计等，这些平台提供海量模板、支持中文输入与AI智能生成，具备全中文界面、本土化元素和矢量导出功能，适合零基础用户快速制作高质量Logo。高质量免费logo设计网站国产免费logo生成工具推荐这是不少网友都关注的接下来由PHP小编为大家…

程序猿
2026年9月24日
2000
用户投稿

如何通过BIOS调整CPU电压实现节能？

答案：CPU降压通过BIOS调整Vcore电压，采用Offset模式在保证稳定前提下降低功耗与温度，提升能效；需结合HWiNFO64等工具监控温度、功耗，并用Prime95等压力测试验证稳定性，避免蓝屏或崩溃，合理设置可使CPU在更低温度下维持更高睿频，实现节能且不牺牲性能。通过BIOS调整CPU…

程序猿
2026年9月24日
7000
用户投稿

为什么GPU显存带宽比容量更重要？

显存带宽比容量更重要，因其直接决定数据传输速度，影响GPU计算单元的利用率。在AI训练和高分辨率渲染中，高带宽可避免“数据饥饿”，确保海量数据高效流转，而HBM技术凭借3D堆叠和宽接口提供远超GDDR的带宽，成为高性能计算的关键。 GPU显存带宽比容量更重要，核心在于现代GPU的工作模式和其处理的数…

程序猿
2026年9月24日
1000
用户投稿

VSCode如何实现代码热重载 VSCode实时预览开发的高效配置方案

使用live server扩展实现静态文件的实时预览，保存后浏览器自动刷新；2. 利用现代前端框架（如react、vue）内置的开发服务器（如vite、webpack dev server）实现hmr热模块替换，修改代码后仅更新变动模块而不刷新页面；3. 结合browsersync等工具实现多设备同…

程序猿
2026年9月24日
0000
用户投稿

mysql临时表如何使用_PHP中操作mysql临时表的具体步骤

MySQL临时表仅在当前会话可见，连接关闭后自动删除，适合中间数据处理。使用PHP操作时，先通过mysqli或PDO建立数据库连接，再执行CREATE TEMPORARY TABLE语句创建临时表，随后可像普通表一样进行INSERT、SELECT及JOIN等操作。临时表可与永久表同名且优先被使用，支…

程序猿
2026年9月24日
0000
用户投稿

UC浏览器怎么查看和清除LocalStorage数据 UC浏览器LocalStorage数据管理方法

可通过隐私设置清除或开发者工具查看LocalStorage。①在UC浏览器设置中选择“隐私与安全”→“清除浏览数据”，勾选“Cookie及其他网站数据”即可批量删除LocalStorage；②打开uc://inspect启用开发者工具，通过电脑Chrome远程调试查看具体键值对；③root设备后使用…

程序猿
2026年9月24日
2000
用户投稿

Java语法基础中static关键字可以修饰哪些内容

static关键字用于定义类成员，包括静态变量（如计数器）、静态方法（如工具方法）、静态代码块（类加载时执行）和静态内部类（不依赖外部类实例），均属于类而非对象，通过类名访问，提升成员至类级别实现共享与提前使用。 static 关键字在 Java 中主要用于定义与类相关而非与对象实例相关的成员。它不…

程序猿
2026年9月24日
1000
用户投稿

mysql中*是什么意思 mysql星号通配符解析

在 mysql 中，星号（）最常用于 select 语句中代表所有列，但应谨慎使用。1）它方便查看所有数据，但可能返回不必要的数据，影响性能。2）使用可能降低代码可维护性，建议明确列出所需列。3）在like操作符中，不是通配符，需用regexp。4）在视图中使用可能导致定义失效。5）可结合limit…

程序猿
2026年9月24日
0000
用户投稿

google浏览器怎么把网页保存为PDF_google浏览器网页保存为PDF方法

使用Chrome将网页保存为PDF，首先按Ctrl+P进入打印界面，选择“另存为PDF”并调整设置后保存；也可通过F12打开开发者工具，截取指定元素或完整页面截图后转为PDF；还可安装“Save as PDF”等扩展程序实现更高质量的导出。如果您希望将当前浏览的网页完整保存以便离线查看或分享，Go…

程序猿
2026年9月24日
0000
用户投稿

windows怎么关闭cortana进程_彻底关闭小娜(cortana)后台进程的方法

1、可通过任务管理器结束Cortana进程并禁用其启动项；2、修改注册表或组策略可永久关闭；3、重命名系统目录文件夹可阻止其运行。如果您发现Windows系统中Cortana（小娜）后台进程占用资源或影响系统性能，可能是该服务在后台持续运行。以下是彻底关闭Cortana进程的操作步骤：本文运行环…

程序猿
2026年9月24日
8000
苹果过时产品名单更新，M5 iPad Pro 开箱视频流出

日前，苹果已将 iphone 11 pro max 和 apple watch series 3 的所有型号列入“过时产品”（vintage product）行列。根据苹果的规定，一款产品在停止销售满 5 年后，可能会被归为“过时产品”。不过，这一分类并不会显著影响售后服务——苹果仍会继续为这些设…

程序猿
2026年9月24日 • 用户投稿
6000
用户投稿

VSCode如何实现AI版本迁移辅助 VSCode跨版本升级的智能建议

vscode的“ai版本迁移辅助”并非独立功能，而是通过扩展兼容性检查、设置同步、lsp/dap协议支持及社区资源等生态能力协同实现；2. 升级后扩展无法工作时，应检查更新日志、尝试降级或重新安装扩展、禁用冲突扩展、查看控制台错误信息并向作者报告问题；3. 备份设置和扩展列表可通过启用设置同步、手动…

程序猿
2026年9月24日
10000
用户投稿

php-gd怎样处理图像异常_php-gd图像处理错误捕获

PHP-GD 图像处理需主动捕获警告、检查返回值、预验证文件类型并调整内存限制，通过错误处理器和异常封装避免崩溃。 PHP-GD 库在处理图像时，可能会因为文件格式错误、内存不足、不支持的图像类型或函数调用不当等原因导致异常。由于 GD 函数大多不会抛出异常，而是返回 false 或产生警告，因此需…

程序猿
2026年9月24日
1000