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

于 2022-10-27 11:02:25 发布
阅读量739 收藏 1
点赞数
文章标签： html javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_66489187/article/details/127548255
版权

<!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">

    <script src="../js/jquery-3.3.1.min.js"></script>

    <title>Document</title>

    <style>

        table {

            margin: 0 auto;

        }

        p {

            text-align: center;

        }

    </style>

</head>

<body>

    <br><br><br>

    <table border="1" width="700px">

        <tr id="one">

            <th>ID</th>

            <th>姓名</th>

            <th>薪水</th>

            <th>操作</th>

        </tr>

    </table><br><br><br>

    <p>

        ID

        <input type="text" id="xh">

        姓名

        <input type="text" id="name">

        薪水

        <input type="text" id="money">

        <input type="button" value="添加" οnclick="insert()" id="tj">

        <input type="button" value="保存" style="display: none;" id="bc" οnclick="newbc()">

    </p>

</body>

<script>

    //添加

    function insert() {

        //先获取几个文本框的值

        var xh = $("#xh").val();

        var name = $("#name").val();

        var money = $("#money").val();

        //把这几个值保存在一行

        var tr = $("<tr><td>" + xh + "</td><td>" + name + "</td><td>" + money + "</td><td><input type='button' value='删除' οnclick='del(this)'><input type='button' value='编辑' οnclick='bj(this)'></td></tr>")

        //判断文本框中是否有空值

        if (xh.trim() == "" || name.trim() == "" || money.trim() == "") {

            alert("id,姓名,薪水等不能为空")

        } else {

            //把那一行值添加到tr中

            $("#one").after(tr)

            //把文本框的值清空

            $("#xh").val("");

            $("#name").val("");

            $("#money").val("");

        }

    }//

    //删除

    function del(obj) {

        //获取当前按钮的父节点td

        var td = $(obj).parent();

        //获取td的父节点tr

        var tr = td.parent();

        //验证是否删除返回true

        var flag = confirm("确认删除吗？")

        if (flag) {

            //true执行代码

            tr.remove();

        } else { }

    }

    //编辑

    //全局变量编辑这一行

    var newtr = ""

    function bj(obj) {

        //获取当前按钮的父节点td

        var td = $(obj).parent();

        //获取td的父节点tr

        newtr = td.parent();

        //获取td的兄弟元素，返回数组

        var tdes = td.siblings();

        //获取数组的值,下标0开始

        var id = tdes[0].innerText;

        var name = tdes[1].innerText;

        var money = tdes[2].innerText;

        //把数组的值添加到文本框中

        $("#xh").val(id);

        $("#name").val(name);

        $("#money").val(money);

        //实现文本框不可编辑，可传值

        $("#xh").attr("readOnly", true)

        //显示和隐藏按钮

        $("#tj").hide();

        $("#bc").show();

    }

    //保存

    function newbc(obj) {

        var xh = $("#xh").val();

        var name = $("#name").val();

        var money = $("#money").val();

        //新建一行

        var tr = $("<tr><td>" + xh + "</td><td>" + name + "</td><td>" + money + "</td><td><input type='button' value='删除' οnclick='del(this)'><input type='button' value='编辑' οnclick='bj(this)'></td></tr>")

        if (xh.trim() == "" || name.trim() == "" || money.trim() == "") {

            alert("id,姓名,薪水等不能为空")

        } else {

            //把这一行替换编辑哪一行

            $(newtr).replaceWith(tr)

        }

        $("#xh").val("");

        $("#name").val("");

        $("#money").val("");

        //显示和隐藏按钮

        $("#tj").show();

        $("#bc").hide();

        //实现文本框可编辑，可传值

        $("#xh").attr("readOnly", false)

    }

</script>

</html>

夜不入醒梦人
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
用HTML和Javascript编写一个可在线编辑并存储表格的网页
涂宇鸽的博客
03-24 2824
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="...
html+css+script 简单表格
fangyuan1987的博客
07-24 221
  添加有更换皮肤功能  没有具体验证啦 效果可以下载上传的压缩文件（我是新手 写的不好别介意啊）   &lt;html&gt; &lt;head&gt; &lt;title&gt;HTML+CSS+JS&lt;/title&gt; &lt;link href="skins0.css" rel="stylesheet" type="text/css" id
html5写入文件,HTML5实现文件读取、编辑、保存
weixin_42513632的博客
06-03 1122
最近自己捣鼓了一个好玩的项目觅迹导航，核心功能已经开发完成，后续会抽时间完善一下细节，并开放使用。做这个项目的过程中涉及到本地文件的读写，而且项目的定位不涉及兼容性问题，所以就直接用HTML5实现了，这里将实现过程以及涉及到的知识点整理一下。HTML5读取文件HTML5读取文件主要利用的就是FileReader这个API，它的使用需要从一个构造函数开始：1var reader = new File...
javascript实现HTML表格的插入、更新和删除功能
allway2的博客
03-31 3840
在本文中，我们将学习如何使用 HTML、CSS 和 javascript 执行 CRUD 操作。在各种博客上，您可以找到 javascript 中的 CRUD 操作。但是在很多文章中，我注意到他们都使用静态表在 HTML 表中使用 javascript 执行插入更新删除。 但是在这篇文章中，我将借助javascript向您解释HTML表格中的插入、更新和删除功能。 在本文中，我们将介绍以下几点 如何使用 javascript 在 HTML 表中动态添加数据 在 JavaScript 中从表中删除
Java编辑表_java 表格项的删除、编辑、增加 修改版
weixin_35125814的博客
02-15 361
修改之后的java 代码：package com.platformda.optimize;import java.awt.BorderLayout;import java.awt.Button;import java.awt.GridLayout;import java.awt.Label;import java.awt.Point;import java.awt.TextField;import...
JavaScript+Java实现HTML页面转为PDF文件保存的方法
10-22
借助iText这个Java库,我们可以将HTML文件保存为图片文件进而转换成PDF格式,接下来就来具体看下JavaScript+Java实现HTML页面转为PDF文件保存的方法
高达购物车案例 资源，jQuery + Java Script 实现
05-01
高达购物车案例 资源，jQuery + Java Script 实现
java+FFmpeg+JavaCV实现无控件HTML页面视频实时预览，录像等，RTSP协议
04-20
java+FFmpeg+JavaCV实现无控件HTML页面视频实时预览，录像等，RTSP协议
HTML中表格动态添加_动力节点Java学院整理
09-28
主要介绍了HTML中表格动态添加的实例代码，需要的的朋友参考下吧
Java在PDF中添加表格过程详解
08-25
主要介绍了Java在PDF中添加表格过程详解，本文将介绍通过Java编程在PDF文档中添加表格的方法。添加表格时，可设置表格边框、单元格对齐方式、单元格背景色、单元格合并、插入图片、设置行高、列宽、字体、字号等,...
通过按钮添加、删除表格及表单元素
weixin_44144510的博客
12-10 3196
通过点击“添加”“删除”按钮，添加和删除表格里的一行。表格里除了文字还有些按钮、下拉选框之类表单控件
JavaWeb——JavaScript精讲之DOM、BOM对象与案例实战（动态添加删除表格）
数字世界 万物互联
05-21 827
上一博文种讲解了JavaScript基础的ECMAScript，包括基本语法和部分对象，本文中继续讲解JavaScript中比较重要的两部分内容BOM、DOM及事件，后文中有对应的实战练习。 1、DOM简单学习 DOM是用来控制html文档的内容的： 1）document.getElementById("id值")：通过元素id获取元素对象Element。 2）操作Element对象： 修改属性值：要明确获取的对象是哪一个，再查看API，找其中有哪些属性可以设置； 修改标签体内容：通过属性in...
HTML 前端表格处理与保存
qq_39832685的博客
08-18 1150
前端处理完成表格内容，传送后端查询完成后 更新页面表格；上述内容为读取表格内容 并展示的基础方法，但是 展示的 内容 会不太美观，可以写一点简单的。开发时，使用到的 EXCEL 表格的处理方法， 其中 包含读取、展示、处理、下载等；这时候会发现 表头的 ok 并没有贯穿全行 这里就需要设置 ok 那个单元格的。data 为列表字典，JSON 数据；以上便是此次 Flask 开发的 web前端 代码记录；可以根据上面的 js 制作翻页功能。写一个按钮进行关联几个使用。使用 CSS 样式后。...
js 实现html 的table 的增删改存
chain_fei的博客
09-18 2232
#tab tr td{ text-align: center; } 姓名 年龄 操作 张三 18 张四 18
html之表格数据增加删除修改
热门推荐
Quincy.Coder的博客
10-11 2万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css"> <script src="./bootstrap-
html按钮点击保留表单数据,如何在点击提交后在html表单中保留输入的数据
weixin_34742806的博客
06-04 3367
我在html页面中有一个表单，在点击提交按钮后最终被清除。我想知道如何在点击提交后将数据保留在表单中，以防用户需要修复任何错误。任何帮助，将不胜感激！如何在点击提交后在html表单中保留输入的数据下面是HTML代码： Name: Last Name: Address: Postcode:，这里是JavaScript代码：function validate() {var firstname = do...
javscript 制作 格子在表格内任意移动案例
Java_avaj1的博客
10-12 163
通过键盘上'w' 's' 'd' 'a' 使格子在制作的表格中任意移动
[推荐] 超强表格,一定要看哦 :）
LxcJie的专栏
09-01 2772
    上一个项目使用了一个超级表格,现在共享出来,希望对大家有所参考.        a, 此表格可以实现增加,删除,上移,下移,修改等很多的操作,并且,可以设置每一列的编辑方式.    b, 目前含有两种编辑方式: 1,文本框编辑 2,下拉框编辑 (需要提供两个数组,一个是text,一个是value)    c, 编辑过程中,可以使用tab键进入下一个单元格进行编辑,也可以之间使用enter键
Vue实现在当前表格数据复制后可编辑、保存功能代码
CodingNoob
05-23 6207
最近在用vue做项目的时候遇到一个在当前数据列表里面实现可复制，并且可以编辑然后保存功能，如果是单纯的复制，那很简单，直接往数据里面添加一条数据就可以了。 但是需求是要求复制，并可以编辑保存。自己想了一下，然后写了一些demo. 最终效果如下图所示： 代码如下： &lt;template&gt; &lt;div class="demo"&gt; &lt;div clas...
JTable可以添加行并编辑表格并保存java
最新发布
05-17
是的，JTable可以添加行并编辑表格，并且可以通过Java程序将更改保存到数据源中。下面是一个简单的示例代码，展示如何在JTable中添加行并将更改保存到CSV文件中： ```java import javax.swing.*; import javax....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值