jQuery实现动态添加删除表格的行

已于 2022-03-27 09:22:33 修改
阅读量2.4k 收藏 16
点赞数 2
分类专栏： # Javaweb 文章标签： intellij-idea 数据库 java
于 2022-03-26 18:28:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48747169/article/details/123760815
版权

方法一：使用click补绑

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <style type="text/css">
        #tab{
            width: 500px;
            height: 200px;
            border-spacing: 0;
            border-collapse: collapse;
            border:  black solid;
            text-align: center;
        }
        #tab tr,#tab td,#tab th{
            border:  black solid;

        }

    </style>
    <script type="text/javascript" src="JS/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //定义点击函数
            var delFun=function (){
                var na = $(this).parent().children().eq(0).text();
                if (confirm("是否删除["+na+']')){
                    $(this).parent().remove();
                }
            }
            //绑定删除点击事件
            $(".del").click(delFun);
            //添加行
            $("#submit").click(function (){
                var name = $("#name").val();
                var age = $("#age").val();
                var sex = $("#sex").val();
                 $('<tr>'+' <td>'+name+'</td>'+' <td>'+age+'</td>'+' <td>'+sex+'</td>'+'<td class="del">删除</td>'+'</tr>').appendTo("#tab");
                 //为添加的行，绑定点击事件
                $(".del:last").click(delFun);
            })
        })

    </script>
</head>
<body>
<div style="margin-left: 35%;">
<table id="tab">
    <tr>
        <th>name</th>
        <th>age</th>
        <th>sex</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>18</td>
        <td>男</td>
        <td class="del">删除</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>19</td>
        <td>女</td>
        <td class="del">删除</td>
    </tr>
    <tr>
        <td>王五</td>
        <td>20</td>
        <td>女</td>
        <td class="del">删除</td>
    </tr>
</table>
</div>
<div style="border: black solid 1px;margin-top: 50px;width: 60%;margin-left: 20%">
    <table style="margin-left: 20%">
        <tr>
            <td>name:</td>
            <td><input type="text" id="name"></td>
        </tr>
        <tr>
            <td>age:</td>
            <td><input type="text" id="age"></td>
        </tr>
        <tr>
            <td>sex:</td>
            <td><input type="text" id="sex"></td>
        </tr>
    </table>
    <button style="margin-left: 40%" id="submit">submit</button>
</div>
</body>
</html>

方法二：使用.on绑定

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <style type="text/css">
        #tab{
            width: 500px;
            height: 200px;
            border-spacing: 0;
            border-collapse: collapse;
            border:  black solid;
            text-align: center;
        }
        #tab tr,#tab td,#tab th{
            border:  black solid;

        }

    </style>
    <script type="text/javascript" src="JS/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //绑定删除点击事件
            $(document).on("click",".del",function (){
                var na = $(this).parent().children().eq(0).text();
                if (confirm("是否删除["+na+']')){
                    $(this).parent().remove();
                }
            })
            //添加行
            $("#submit").click(function (){
                var name = $("#name").val();
                var age = $("#age").val();
                var sex = $("#sex").val();
                $('<tr>'+' <td>'+name+'</td>'+' <td>'+age+'</td>'+' <td>'+sex+'</td>'+'<td class="del">删除</td>'+'</tr>').appendTo("#tab");
            })
        })

    </script>
</head>
<body>
<div style="margin-left: 35%;">
    <table id="tab">
        <tr>
            <th>name</th>
            <th>age</th>
            <th>sex</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>18</td>
            <td>男</td>
            <td class="del">删除</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>19</td>
            <td>女</td>
            <td class="del">删除</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>20</td>
            <td>女</td>
            <td class="del">删除</td>
        </tr>
    </table>
</div>
<div style="border: black solid 1px;margin-top: 50px;width: 60%;margin-left: 20%">
    <table style="margin-left: 20%">
        <tr>
            <td>name:</td>
            <td><input type="text" id="name"></td>
        </tr>
        <tr>
            <td>age:</td>
            <td><input type="text" id="age"></td>
        </tr>
        <tr>
            <td>sex:</td>
            <td><input type="text" id="sex"></td>
        </tr>
    </table>
    <button style="margin-left: 40%" id="submit">submit</button>
</div>
</body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

C币贫困户
关注
专栏目录
jQuery 动态添加或删除表格行
01-03
jquery动态添加删除行方法两种
使用jQuery实现动态添加和删除行（表格）的操作
qq_47888755的博客
08-17 2289
使用jQuery实现动态添加和删除行实现效果代码 实现效果 代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Doc
javascript-动态增加和删除表格的行
最新发布
陆沙的博客
08-08 488
无
【jquery实现动态给表格添加删除行，合并指定单元格】
weixin_42589681的博客
08-13 676
jquery+jsp实现动态给表格添加删除行，合并指定单元格的代码示例
JQuery动态添加删除表格
tempsitegoogle
07-21 155
&lt;style type="text/css"&gt;body{font-size: 13px;}table{text-align: center;border:solid 1px #eee;width: 100%;border-collapse: collapse;margin-top: 20px;}td{border: solid 1px #eee;width: 15%;}table{ma...
原生JS和JQuery动态添加、删除表格行的方法
10-24
例如，以下代码演示了使用JQuery添加和删除表格行： ```javascript // 使用JQuery添加新行 function addNewJQuery() { var objMyTable = $('#tbl'); objMyTable.append('<tr><td>...
jQuery 动态添加、删除表格行特效
05-12
本资源主要探讨的是如何使用jQuery实现动态添加和删除表格行的特效，这对于构建交互性强的网页表格非常有用。以下将详细讲解相关知识点。 首先，jQuery提供了方便的DOM操作方法，如`append()`和`remove()`，可以...
JQuery动态添加和删除表格行的方法
10-24
下面详细阐述了如何使用JQuery来动态地添加和删除表格中的行。 1. 动态添加表格行的基本思路 在进行动态添加行操作时，我们通常先准备一个表格行的模板。这个模板是一个隐藏的元素，它具有所需的所有单元格元素，...
jQuery实现动态添加、删除按钮及input输入框的方法
10-19
通过本篇文章，我们将学习如何使用jQuery实现动态添加和删除按钮及input输入框的方法，同时还将涉及到事件响应和页面元素动态操作的相关技巧。 首先，我们需要注意的是，当页面加载完毕后，jQuery的$(document)....
关于用jquery 动态增加、删除表格的行，列操作。
热门推荐
whax
07-05 1万+
jquery 动态增加、删除表格的行，列操作。
jquery动态添加删除行 点击按钮动态添加行或动态删除行
08-07
jquery动态添加删除行 点击按钮动态添加行或动态删除行代码 删除后序号重新排列
Jquery实现表格动态增加一行，删除一行.html
05-15
Jquery实现表格动态增加一行，删除一行(最简洁的代码实现)
jquery表格动态添加删除行代码.zip
07-05
jquery表格动态添加删除行代码是一款基于jquery实现的表格里面点击按钮后可进行自动添加删除行功能代码。
jquery入门之动态表格---动态添加删除一行
08-19
jquery入门之动态表格---动态添加一行
jQuery动态添加、删除表格行
U
04-21 1615
 jQuery实现动态添加或删除表格行特效，每点击一次添加，会添加一个表格单元格，点击删除会删掉所有行CSS：SCRIPT：
jquery 动态增加删除行
weixin_30908941的博客
10-11 90
最近写程序，碰巧有动态增加删除行，下面就记录一下 html就不写了，也没有什么，直接上核心了 新增行 function addRow(obj){　　//获得table一共有多少行，方便追加的时候给序号赋值 var length = $("#grid tr").length;　　//获得当前是第几行，以便追加的时候，在该行下进行新增，我这里跨的级别比较多，根据实际层级去定义...
jQuery动态添加与删除表格行【append方法与on方法与eq方法】
mizuhokaga的博客
02-20 1600
基于jquery版本:jquery-1.10.1.js 去实现表格的 动态添加和动态删除(看js代码直接点下面链接) 需求: 将表单的值提交至表格,并且可以删除 html代码很简单: <body> <h1>添加用户</h1> <div id="box"> name:<input type="text" id="user"/> ...
利用jQuery动态添加与删除表格行与单元格
在本文档中，我们将深入探讨如何使用jQuery库实现动态添加和删除表格行(tr)和单元格(td)的功能。jQuery是一种流行的JavaScript库，以其简洁的语法和强大的功能而闻名，特别适合前端开发。在服务器端运行（runat=...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值