ajax+jqery 批量删除

最新推荐文章于 2024-06-12 18:34:44 发布
最新推荐文章于 2024-06-12 18:34:44 发布
阅读量353 收藏
点赞数
文章标签： 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
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ie浏览器下删除父元素的父元素（祖父元素）-----remove()方法在ie下失效的解决方法
weixin_40848559的博客
12-20 3500
今天在做一个项目时，就遇见了ie兼容性问题。 问题如下： 我们项目需求是要求做一个表格，点击”添加”按钮时，就会添加一行有序号，input输入框和“完成”以及“取消”按钮的元素。如果点击“取消”按钮时，整行元素就会删除。 html结构如下所示： 需求是删除“取消”所在元素的父元素的父元素。我一看这么简单，直接js就写为： var _obj = $("#table-cont
页面级别的JS模糊查询
热门推荐
一只成长的程序猿.....
03-18 2万+
做项目的时候通过WebService接口查询出一系列的信息，但是因为信息量大，一时找不到自己想要的。所以加入查询，但是是通过WebService接口查询的，导致不能后台处理这个查询。故而写了一段JS。通过轮询表格的td的方法实现模糊查询。 页面代码如下： 查询条件
jquery实现增删改查
qq_1518671828欢迎打扰
04-16 1287
//删除逻辑 $(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 2695
在写文章系统的删除功能。需要删除一行数据。在删除的页面，需要jQuery 删除一hang. 局部刷新数据。 $(".del").click(function(){ var id = $(this).attr("hid"); var t = $(this).parent().parent(); var i = co...
解决jQuery对表格数据的增删改查，增加过后删除失效的情况
qq_54000867的博客
12-02 1019
正常情况下： $(".del").click(function(){ //找到行tr进行删除 $(this).parent().parent().remove(); }) 修改后为： $(document).on('click','.del',function(){ $(this).parent().parent().remove(); })
使用JQuery 对表格数据上下移动
qinxcb的专栏
12-18 895
$(document).ready(function() {         //上移处理      $("#btn_up").click(function(){          var htm ='';          $("input[name=check_box_show]").each(function(){                 if($(this).attr
js表格中通过某行按钮获取本行其他数据
谁的博客
07-18 4249
描述 $('.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 340
$(this)获取当前点击的标签 $(this).parent().parent().find('#path').val() .find(’. path’) 查找父节点的path类 .find(’#path’) 如果是for生成的，最好用class
Jquery 获取元素（父节点、子节点、兄弟节点）方法
炉火纯青
11-11 2651
$(this).parent(); // 父节点 $(this).parents(); // 全部父节点 $(this).children(); // 全部子节点 $(this).find(); // 返回父元素中的子元素 $(this).contents(); // 返回元素里面的所有内容，包括节点和文本 $(this).prev(); // 上一个兄弟节点 $(this).prevAll(); // 之前所有兄弟节点 $(this).next(); // 下一个兄弟节点 $(this).next..
jQuery属性操作
Hst1120的博客
11-22 1094
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 ajax 实现批量删除
面向太阳、骄傲的活着
04-03 2719
jsp页面jquery代码： // JavaScript Document $(document).ready(function() { // 全选 $("#allChk").click(function() { $("input[name='subChk']").prop("checked",this.
ajax增删改
weixin_43358395的博客
08-19 166
add.jsp <%@page import="java.util.Date"%> <%@page import="java.text.SimpleDateFormat"%> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> &l...
PHP ajax+jQuery 实现批量删除功能实例代码小结
10-17
主要介绍了PHP ajax+jQuery 实现批量删除功能实例代码小结,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
jQuery+ajax实现批量删除功能完整示例
10-16
主要介绍了jQuery+ajax实现批量删除功能,结合完整实例形式分析了jQuery+ajax结合bootstrap与layer.js插件实现的批量删除与交互功能相关操作技巧,需要的朋友可以参考下
PHP jQuery+Ajax结合写批量删除功能
10-19
主要介绍了PHP jQuery+Ajax结合写批量删除功能的相关资料,需要的朋友可以参考下
jquery动态添加删除div
金石软件
08-06 2733
jquery动态添加删除div       请选择上传的图片  增加图片      X            $(document).ready(function(){    bindListener(); }); // 用来绑定事件(使用unbind避免重复绑定) function bindListener(){      $("a[name
jquery删除a标签的父div
混子
03-23 1965
错误示范: <div> <input type="text"> <a href="#" onclick="reduce()"> </div> function reduce(){ $(this).parent().remove(); } 正确写法： <div> <input type="t...
IDEA 高效插件工具
最新发布
刘皇叔说Java的博客
06-12 777
IDEA 是 Java 开发工程师最强有力的工具之一利用好 IDEA 插件可以提高生产力，可以有更好的编程体验。本文推荐一些自己常用，能够提高开发效率、减少 BUG、提升编程体验的 IDEA 插件。GitToolBox 代码提交人JSON转领域对象工具：GsonFormatJrebel 热部署神器any-rule 正则表达式Background Image Plus——背景图Translation——必备的翻译插件Key Promoter X——快捷键提示。
jquery实现批量删除
05-30
你可以使用以下 jQuery 代码来实现批量删除： ```javascript $(function() { // 单个删除 $('.delete-btn').click(function() { var id = $(this).data('id'); if (confirm('确定要删除吗？')) { // 发送 AJAX...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值