ajax+jqery 批量删除

最新推荐文章于 2021-11-22 23:32:56 发布
最新推荐文章于 2021-11-22 23:32:56 发布
阅读量369 收藏
点赞数
文章标签： intellij-idea java intellij idea
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54039480/article/details/121479982
版权

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script src='http://code.jquery.com/jquery-2.1.1.min.js'></script>

</head>

<body>

    <!-- <div class="modal fade" id="updateModel" role="dialog">

        这是什么!!!!

    </div> -->

    <div>

        <div>

            姓名：<input type="text" name="uname" id="">

            年龄：<input type="text" name="uage" id="">

            地址：<input type="text" name="uaddr" id="">

            <input type="button" value="添加" name="add">

            <input type="button" value="批量删除" name="rmrf">

        </div>

        <div>

            <table border="1px" cellspacing="0" cellpadding="1">

               <thead>

                    <tr>

                        <th>

                            <input type="checkbox" name="" id="" οnchange="checkAll(this)">

                        </th>

                        <th>姓名</th>

                        <th>年龄</th>

                        <th>地址</th>

                        <th>操作</th>

                    </tr>

                </thead>

                <tbody>

                    <tr>

                        <td><input type="checkbox" name="" id=""></td>

                        <td>骨王</td>

                        <td>19</td>

                        <td>大坟墓</td>

                        <td>

                            <input type="button" value="修改" οnclick="update(this)" class = ".xg">

                            <input type="button" value="删除" οnclick="del(this)">

                        </td>

                    </tr>

                </tbody>

            </table>

        </div>

    <script>

        $(function () {

            $("input[name='add']").click(function () {

               // console.log($(this));

                //获取input内容

                var uname = $("input[name='uname']").val();

                var uage = $("input[name='uage']").val();

                var uaddr = $("input[name='uaddr']").val();

                //表格追加 把input的值放入trDom     让表格追加三个值

                var trDom = $("<tr>" +

                    "<td><input type='checkbox' name='' id='' ></td>" +

                    "<td>" + uname + "</td>" +

                    "<td>" + uage + "</td>" +

                    "<td>" + uaddr + "</td>" +

                    "<td>" +

                    "<input type='button' value='修改' class='modify' οnclick='update(this)'>" +

                    "<input type='button' value='删除' οnclick='del(this)'>" +

                    " </td>" +

                    "</tr>");

               

                $("table tbody").append(trDom);

            })

            $("input[name='rmrf']").click(function () {

                console.log($(this));

                var checedkBoxDom = $("tbody [type='checkbox']:checked  ")

                console.log(checedkBoxDom)

                $.each(checedkBoxDom, function (index, value) {

                    $(this).parent().parent().remove();

                })

            }

            )

            console.log($(this));

        })

        function update(thisDom) {

                console.log($(thisDom));

                var uname = $("input[name='uname']").val();

                var uage = $("input[name='uage']").val();

                var uaddr = $("input[name='uaddr']").val();

            //    if(){

            //    }

            //修改失败1

            $(".modify").click(function () {

                $(this).parent().siblings("td").each(function () {

                    var a = $(this).find("input text");

                    if (!a.length) {

                        $(this).html("<input size='13' type='text' value='" + $(this).text() + "'/>");

                    } else {

                        $(this).html(a.val()).replaceWith(("<tb>Paragraph. </tb>"))

                    }

                    

                })

            })

        }

        function del(thisDom) {

            //    $(tdisDom).parent().parent().empty()

            $(thisDom).parent().parent().empty()

        }

        //全选

        function checkAll(thisDom) {

            //console.log( $(thisDom).prop('checked',true));

            var checkBoxDom = $("tbody [type='checkbox']")

            console.log(checkBoxDom)

            $.each(checkBoxDom, function (index, value) {

                $(this).prop('checked', !$(this).prop('checked'))

            })

        }

    </script>

</body>

</html>

 

小axie
关注
ie浏览器下删除父元素的父元素（祖父元素）-----remove()方法在ie下失效的解决方法
weixin_40848559的博客
12-20 3570
今天在做一个项目时，就遇见了ie兼容性问题。 问题如下： 我们项目需求是要求做一个表格，点击”添加”按钮时，就会添加一行有序号，input输入框和“完成”以及“取消”按钮的元素。如果点击“取消”按钮时，整行元素就会删除。 html结构如下所示： 需求是删除“取消”所在元素的父元素的父元素。我一看这么简单，直接js就写为： var _obj = $("#table-cont
jQuery 之ajax 批量删除
呀哈的博客
11-04 532
check 是全选全不选总复选框 checks是单个复选框 deletedAll是批量删除按钮 jquery代码 $('#check').click(function () { // 全选 $('.checks').prop("checked",$(this).prop('checked')); }) $('#deletedAll').click(function () { //创建数组 var ar...
jquery ajax实现批量删除具体思路及代码
ouxiaoxian的博客
03-19 1896
显示页面代码// 全选 $("#allChk").click(function() { $("input[name='subChk']").prop("checked",this.checked); }); // 单选 //var subChk = $("input[name='subChk']") //subChk.click(function() { //$("#allChk").prop(".
jquery实现增删改查
qq_1518671828欢迎打扰
04-16 1352
//删除逻辑 $(document).on('click','.del',function(){ $(this).parents('tr').remove(); }); //添加逻辑 $('.add').click(function(){ $('#myModel').find('input').each(function(){ ...
jQuery 中$(this).parent().parent().remove()无效。
weixin_30480651的博客
07-19 2725
在写文章系统的删除功能。需要删除一行数据。在删除的页面，需要jQuery 删除一hang. 局部刷新数据。 $(".del").click(function(){ var id = $(this).attr("hid"); var t = $(this).parent().parent(); var i = co...
JQ
qq1635346647的博客
04-14 206
JQ的基本使用 1、 元素选择器 元素选择器 直接写上元素的名称 $("button").click(function (){ alert("123"); }) 2、类选择器 $(".red").click(function (){ alert("123"); }) 3、 id选择器 $("#p1").click(function(){ alert('p1'); }); 4、 常用的 这...
PHP ajax+jQuery 实现批量删除功能实例代码小结
10-17
PHP与AJAX结合jQuery实现的批量删除功能是Web开发中的常见需求，尤其适用于管理后台中对数据进行批量操作。通过这个实例代码，我们可以学习如何结合PHP服务器端代码和jQuery前端代码来实现这一功能。 首先，我们来...
jQuery+ajax实现批量删除功能完整示例
10-16
这个例子展示了如何利用jQuery、ajax和bootstrap创建一个用户友好的批量删除功能。通过使用layer.js插件，我们可以提供交互式的确认对话框，确保用户在删除操作之前有足够的时间思考。整个流程包括前端的选中项收集...
PHP jQuery+Ajax结合写批量删除功能
10-19
在探讨如何使用PHP结合jQuery和Ajax来实现批量删除功能之前，我们先来理解一下这些技术的概念和它们是如何相互协同工作的。 PHP是一种广泛使用的开源服务器端脚本语言，它擅长于处理HTML、数据库、会话跟踪以及构建...
js表格中通过某行按钮获取本行其他数据
谁的博客
07-18 4324
描述 $('.demo').on('click', function(){ var tem = $(this).parents("tr").find(".classId").val(); }); 解释 .demo：表格中某一行的按钮的class .classId：点击的按钮所在行的某个class $(this)：获取所点击的按钮 $(this).parents("tr")：获...
js获取字节父节点，获取指定tab 行的值
qq_41929657的博客
11-27 394
$(this)获取当前点击的标签 $(this).parent().parent().find('#path').val() .find(’. path’) 查找父节点的path类 .find(’#path’) 如果是for生成的，最好用class
页面级别的JS模糊查询
热门推荐
一只成长的程序猿.....
03-18 2万+
做项目的时候通过WebService接口查询出一系列的信息，但是因为信息量大，一时找不到自己想要的。所以加入查询，但是是通过WebService接口查询的，导致不能后台处理这个查询。故而写了一段JS。通过轮询表格的td的方法实现模糊查询。 页面代码如下： 查询条件
Jquery 获取元素（父节点、子节点、兄弟节点）方法
炉火纯青
11-11 2832
$(this).parent(); // 父节点 $(this).parents(); // 全部父节点 $(this).children(); // 全部子节点 $(this).find(); // 返回父元素中的子元素 $(this).contents(); // 返回元素里面的所有内容，包括节点和文本 $(this).prev(); // 上一个兄弟节点 $(this).prevAll(); // 之前所有兄弟节点 $(this).next(); // 下一个兄弟节点 $(this).next..
jQuery属性操作
Hst1120的博客
11-22 1138
jQuery属性操作 1.1设置或获取元素固有属性(元素本身只带的属性)属性值prop() 1.获取属性语法 prop(“属性”) 2.设置属性语法 prop(“属性”,“属性值”) 1.2设置或获取元素自定义属性attr() 1.3数据缓存 data() data()方法可以在指定的元素上存数据，是存放在元素的内存里面，并不会修改DOM元素结构，一旦页面刷新，之前存放的数据将被移除 <a href="www.baidu.com" title="很好">都挺好</a> &lt
jquery删除a标签的父div
混子
03-23 2019
错误示范: <div> <input type="text"> <a href="#" onclick="reduce()"> </div> function reduce(){ $(this).parent().remove(); } 正确写法： <div> <input type="t...
Jquery异步删除$(this).parent().parent()无效的解决办法
韦_恩的博客
03-24 3200
今天遇到了一个问题，Jquery异步删除无效，我是这么写的（看下图） $(this).parent().parent().remove()直接这么写，数据库删除是没有问题的，但是网页却无法动态删除，只能刷新页面才能显示最新的结果，这显然不是我想要的结果。 实际上只需要这么改（先中间折腾下），定义一个变量var tr来接收一下，之后再通过tr.remove()就好了。 var tr = $...
jquery .parents(), .parent() 和 closest()方法
02-18 6754
parent是找当前元素的第一个父节点，parents是找当前元素的所有父节点 parent()、parents()与closest()方法两两之间有类似又有不同，本篇简短的区分一下这三个方法。通过本篇内容，大家将会在以后使用.parent()、parents()和closest()时不会显得无从下手。 我们直接看例子来来说明一下这三个方法的使用区别： id="menu" style=
jQuery ajax使用$(this).parent()无效解决方法
04-19 466
div=$(this).parent(); //先获取父级元素 div.remove(); //再删除 $(".delStu").click(function () { td = $(this).parent().parent(); if (c...
Struts2 + JSP + jQuery 实现文件批量上传教程
3. **jQuery**：jQuery是一个流行的JavaScript库，简化了DOM操作、事件处理和AJAX交互。在这里，jQuery被用来启用和禁用按钮、删除或添加文件项，以及处理用户选择的文件。 4. **HTML表格**：`<table>`元素用于展示...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值