js实现表格编辑、保存、添加、删除功能

天刚萌萌亮 天刚萌萌亮 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 2.6k累计阅读 2.7k平均单平台 已同步平台 CSDN 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄8年
关注
原创 最新推荐文章于 2025-10-25 19:14:15 发布 2.6k 阅读 AI 写同款· GEO 优化 ›
用HTML和Javascript编写一个可在线编辑并存储表格的网页 1. 界面 原始界面： 编辑界面： 2. 写代码时参考的教程 JavaScript BookList App | No Frameworks Allowing users to edit text content with html5 W3School content editable 3. 我的代码：HTML Part <!DOCTYPE html> <html lang="... 阅读详情 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .cme-table {
            margin: 50px 0 0 50px;
        }

        .cme-table table {
            border-collapse: collapse;
        }

        .cme-table thead tr th {
            border: 1px solid #ddd;
            width: 120px;
            height: 50px;
            background: #f5f5f5;
            font-weight: bold;
            font-size: 12px;
            color: #333;
        }

        .cme-table tbody tr td {
            border: 1px solid #ddd;
            text-align: center;
            font-size: 12px;
            color: #333;
            height: 30px;
        }

        .cme-table tbody tr:hover {
            background: #f8f8f8;
        }

        body a {
            color: #000;
            text-decoration: none;
        }
    </style>
</head>

<body>
    <div class='cme-table'>
        <div class='cme-fixed-table-container'>
            <table cellspacing="0" cellpadding="0">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>姓名</th>
                        <th>人员属性</th>
                        <th>年度</th>
                        <th>月份</th>
                        <th>日期</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                        <td class='table-operation'>
                                <a href="javascript:;" class='edit'>编辑</a>
                                <a href="javascript:;" class='preservation'>保存</a>
                                <a href="javascript:;" class='add'>添加</a>
                                <a href="javascript:;" class='remove'>删除</a>
                        </td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>2</td>
                        <td>2</td>
                        <td>2</td>
                        <td>2</td>
                        <td>2</td>
                        <td class='table-operation'>
                                <a href="javascript:;" class='edit'>编辑</a>
                                <a href="javascript:;" class='preservation'>保存</a>
                                <a href="javascript:;" class='add'>添加</a>
                                <a href="javascript:;" class='remove'>删除</a>
                        </td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>3</td>
                        <td>3</td>
                        <td>3</td>
                        <td>3</td>
                        <td>3</td>
                        <td class='table-operation'>
                                <a href="javascript:;" class='edit'>编辑</a>
                                <a href="javascript:;" class='preservation'>保存</a>
                                <a href="javascript:;" class='add'>添加</a>
                                <a href="javascript:;" class='remove'>删除</a>
                        </td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>4</td>
                        <td>4</td>
                        <td>4</td>
                        <td>4</td>
                        <td>4</td>
                        <td class='table-operation'>
                                <a href="javascript:;" class='edit'>编辑</a>
                                <a href="javascript:;" class='preservation'>保存</a>
                                <a href="javascript:;" class='add'>添加</a>
                                <a href="javascript:;" class='remove'>删除</a>
                        </td>
                    </tr>
                    <tr>
                        <td>5</td>
                        <td>5</td>
                        <td>5</td>
                        <td>5</td>
                        <td>5</td>
                        <td>5</td>
                        <td class='table-operation'>
                                <a href="javascript:;" class='edit'>编辑</a>
                                <a href="javascript:;" class='preservation'>保存</a>
                                <a href="javascript:;" class='add'>添加</a>
                                <a href="javascript:;" class='remove'>删除</a>
                        </td>
                    </tr>
                    <tr>
                        <td>6</td>
                        <td>6</td>
                        <td>6</td>
                        <td>6</td>
                        <td>6</td>
                        <td>6</td>
                        <td class='table-operation'>
                                <a href="javascript:;" class='edit'>编辑</a>
                                <a href="javascript:;" class='preservation'>保存</a>
                                <a href="javascript:;" class='add'>添加</a>
                                <a href="javascript:;" class='remove'>删除</a>
                        </td>
                    </tr>
                    <tr>
                        <td>7</td>
                        <td>7</td>
                        <td>7</td>
                        <td>7</td>
                        <td>7</td>
                        <td>7</td>
                        <td class='table-operation'>
                                <a href="javascript:;" class='edit'>编辑</a>
                                <a href="javascript:;" class='preservation'>保存</a>
                                <a href="javascript:;" class='add'>添加</a>
                                <a href="javascript:;" class='remove'>删除</a>
                        </td>
                    </tr>
                    <tr>
                        <td>8</td>
                        <td>8</td>
                        <td>8</td>
                        <td>8</td>
                        <td>8</td>
                        <td>8</td>
                        <td class='table-operation'>
                            <a href="javascript:;" class='edit'>编辑</a>
                            <a href="javascript:;" class='preservation'>保存</a>
                            <a href="javascript:;" class='add'>添加</a>
                            <a href="javascript:;" class='remove'>删除</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <script src="jquery.js"></script>
    <script>
        //删除行
        $(document).on("click",".remove",function(){
            $(this).parents("tr").remove();
        });
        //添加行
        $(document).on("click",'.add',function(){
            var len = $("[rowId]").length + 1;
            var mtr = '<tr>'+
                '<td></td>'+
                '<td></td>'+
                '<td></td>'+
                '<td></td>'+
                '<td></td>'+
                '<td></td>'+
                '<td class="table-operation">'+
                '<a href="javascript:;" class="edit">编辑 </a>' + 
                '<a href="javascript:;" class="preservation">保存 </a>' + 
                '<a href="javascript:;" class="add">添加 </a>' + 
                '<a href="javascript:;" class="remove">删除</a>' + 
                '</td>'+
                '</tr>';
            $('tbody').append(mtr);
        });
        //编辑
        $(document).on("click",".edit",function(){
            var tr = $(this).parent().parent();
            $(this).closest('td').siblings("td:not('a')").each(function(i,e){
                e = $(e);
                var html = "<input value='"+e.text() + "'type='text' style='width:100px'>";
                e.html(html);
            })
        });
        //保存
        $(document).on("click",".preservation",function(){
            var tr = $(this).parent().parent();
            $("input[type='text']",tr).each(function(i,e){
                e = $(e);
                e.parent().text(e.val());
                e.remove();
            })
        })
    </script>
</body>

</html>

 

本内容遵循 CC 4.0 BY-SA 版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
使用js实现 表的 “增删改查上下移动” 功能 要实现图片中的的效果，废话不多说直接上代码 html代码 <!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"&. 阅读详情

相关推荐

Raptor码（一）：2007RFC5053标准编解码学习

RFC 5053 标准

a_beatiful_knife的博客 3459

JS向表格里添加数据

题目： 1） 定义一个Student对象， 该对象有sname、age、sex、nickname、hobby几个属性 2） 构建数据，将班里所有学生的信息创建成对应的Student对象， 并将这些Student对象存储到数组中 3） 在页面定义一个table标签，并将表头（th）写好。 4） 在表格下方添加一个添加按钮，并给按钮添加一个点击事件。 每点击一次按钮，就通过JS动态添加一行学生信息到表格的尾部。 如果全部添加完成，提示用户“添加完成” 5） 在表格下方添加一个移除按钮，并给按钮添加一个点击事件

qq_45968325的博客 7903

用 SAP HANA SDA 访问 PostgreSQL：从可行性到落地实践的完整指引

摘要：SAP HANA可通过SDA/SDI技术访问PostgreSQL数据库，支持数据虚拟化和实时复制。主要实现路径包括：1)使用Camel JDBC适配器创建虚拟表进行联邦查询；2)利用PostgreSQL Log Reader适配器实现变更数据捕获(CDC)。实施时需配置Data Provisioning Agent，注意权限和网络要求。官方文档指出，通过SDI+DP Agent的方式比直接SDA连接更稳定可靠。虚拟化查询时，HANA会自动将SQL下推到PostgreSQL执行，优化性能。

2007 年 ~ 2025 年，深耕 SAP 技术 18 年 211

JQuery经典例子：页面可编辑表格

jQuery实现隔行换色、可编辑表格、火狐屏蔽Enter键

一支穿云箭 8380

jquery实现可编辑的表格

今天来演示一个用jquery完成的效果：可编辑的表格。 1.先写一个含有表格的页面jqueryEdit.html: &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"        "http://www.w3.org/TR/html4/loose.dtd"&gt;&lt;html&gt;&lt;head&gt; ...

訫誶 167

bootstrap-table动态增删行 编辑表格

效果图： 本文不是使用bootstrap-table-editable.js 拓展插件实现， 结合各个博客文章综合出的效果 html <div class="container" style="width: 100%;margin-left:10px;margin-top: 20px;"> <div th:include="/common/page/co...

Sacred_Relic的博客 2996

可编辑表格

可编辑表格的功能实现

qq_57989057的博客 300

vue.js加jQuery加bootstrap实现的增删改查的案例

css样式跟HTML代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/bootstrap.m...

weixin_34302798的博客 169

html+java script实现表格添加删除编辑保存

html+java script实现表格添加删除编辑保存

weixin_66489187的博客 898

js动态生成一个表格并获取mysql数据库数据_JS实现动态生成表格并向后端提交表格数据（一）...

前段时间开发了一些web应用，其中就有涉及到动态的表格问题，因为很久没有写web前端了，所以在网上找了一些资料，发现很零碎，于是自己就根据找到的资料写了这么一个小功能，主要是供自己记忆，如果能帮到你很荣幸，如果你有更好的方法，也可以相互讨论，相互学习一下。先来看一下需求：在web页面上动态的生成表格，并可以对表格中的数据进行编辑，然后把表格中的数据提交至后端服务器保存。那么我们首先需要解决的是动态...

weixin_35323550的博客 1321

元素js_存dom对象表格增删以及编辑

原生js增删以及编辑表格 今天学习了用Js动态的添加一行数据，具体需求和效果是，有三个（可以是多个）文本框让用户输入信息，这里以用户名，电话，地址，为例子，当用户点击确定提交的时候，吧用户输入的文本信息动态的添加到当前表格中，并为每行添加三个操作按钮，一个用于删除当前添加的信息(删除)，一个是用于修改当前添加的信息（修改），一个是用户保存用户修改以后的信息（保存），添加完当前行信息以后，情况当前

u013239236的专栏 2359

用js简单实现信息录入功能

用js简单实现信息录入功能

qq_64180670的博客 2134

用js实现表格数据管理

用js实现了表格数据管理的以下几个功能：   点击添加按钮可以添加一个空的可以修改的记录。点击表格单元格可以修改文本。修改后实现了保存的接口。如果添加了新的记录而未做任何修改值都为null，保存全部时将被忽略。保存全部时只保存修改过的值，原有的数据不再重复保存。刷新时如果数据未保存则提示保存。点击删除时如果是临时添加的无效数据则直接删除，如果保存过的记录则实现了记录删除的接口。

#维多利亚的秘密# 814

【数据表格】-006-可编辑的数据表格

1、界面展示   2、JSP页面   &lt;%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&gt; &lt;% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request....

piao317110771的博客 403

JS实现即点即编辑功能

     以前在网上都看到过类似的功能，不过没自己想要实现过，这次刚好做静态页面中有这样的一个需求，就试着自己做做看，做完发现也不是什么很难的事情。     效果如图所示：     代码分享   &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;script LANGUAGE="JavaScript"&gt;　 &lt;!-- v..

Jathon 457

html&js之简单信息录入——删除、修改、保存

html&js之简单信息录入——删除、修改、保存

Euniceing的博客 2626

js动态创建行

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> http://www.w3.org/1999/xhtml"> #tab {     border:1px solid #aaa;     border-collapse:collapse;     width:80%; }   #tab  th{     bo

cyhttp的专栏 423

基于SpringBoot和Vue驾校考试管理系统的设计与实现论文

内容概要：本文介绍了驾校考试管理系统的开发与实现，旨在解决传统驾校运营模式中的低效问题。系统采用Vue构建前端界面，SpringBoot搭建后端服务，MySQL作为数据库。系统功能涵盖学员的模拟考试、驾校信息查看、练车预约、试题管理和培训评估；教练员的培训计划管理、模拟考试管理、试题管理、练车预约管理和培训评估管理；管理员的培训计划管理、驾校信息管理、试卷管理、练车预约管理和试题管理。系统设计包括需求分析、系统架构设计、数据库设计和系统实现，确保了高可用性、可靠性、安全性和可扩展性。通过全面的测试，验证了系统的功能和性能，满足了预期需求。适合人群：从事驾校管理、教学及运营的相关人员，尤其是具有一定编程基础的研发人员和技术爱好者。使用场景及目标：①学员可以通过系统高效地进行模拟考试、查看驾校信息、预约练车、管理试题和查看培训评估；②教练员可以管理培训计划、模拟考试、试题、练车预约和培训评估；③管理员可以进行驾校信息管理、试卷管理、练车预约管理和试题管理，提升驾校整体运营效率和服务质量。其他说明：该系统采用现代化技术栈，确保了系统的稳定性和可扩展性。通过详细的UML用例图和功能模块设计，明确了各角色的交互流程。系统经过严格的测试，确保了可靠性和用户体验。未来将根据技术发展和用户需求不断优化，更好地服务于驾校行业，提升管理效率和教学质量。感兴趣自行下载学习！
上一篇： js实现表格上移下移功能
下一篇： js5分钟页面无操作触发弹窗事件
点赞 3
评论 0
书签 书签 11
天刚萌萌亮
天刚萌萌亮
博客等级 码龄8年 16粉丝 45原创
+ 关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值