jquery增删改查

最新推荐文章于 2024-08-04 20:38:28 发布
最新推荐文章于 2024-08-04 20:38:28 发布
阅读量86 收藏
点赞数
文章标签： jquery html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/s20001027/article/details/120422420
版权

整体页面样式

大致结构

 <ul class="tp">

        <li> <input type="checkbox"></li>

        <li></li>

        <li></li>

        <li>2018-05-15 09:59:25</li>

        <li></li>

        <li>

            <button class="live">编辑</button>

            <button class="die">删除</button>

        </li>

    </ul>

    <div class="one">

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

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

        <button>搜索</button>

        <button>添加</button>

        <ul>

            <li>

                <input type="checkbox" class="uncheck">

            </li>

            <li>

                部门名称

            </li>

            <li>

                部门代码

            </li>

            <li>

                修改时间

            </li>

            <li>

                修改人

            </li>

            <li>

                操作

            </li>

        </ul>

        <ul>

            <li> <input type="checkbox"></li>

            <li>1</li>

            <li>11</li>

            <li>2018-05-15 09:59:25</li>

            <li></li>

            <li>

                <button class="live">编辑</button>

                <button class="die">删除</button>

            </li>

        </ul>

        <ul>

            <li> <input type="checkbox"></li>

            <li>1</li>

            <li>11</li>

            <li>2018-05-15 09:59:25</li>

            <li></li>

            <li>

                <button class="live">编辑</button>

                <button class="die">删除</button>

            </li>

        </ul>

        <ul>

            <li> <input type="checkbox"></li>

            <li>2</li>

            <li>11</li>

            <li>2018-05-15 09:59:25</li>

            <li></li>

            <li>

                <button class="live">编辑</button>

                <button class="die">删除</button>

            </li>

        </ul>

        <ul>

            <li> <input type="checkbox"></li>

            <li>3</li>

            <li>11</li>

            <li>2018-05-15 09:59:25</li>

            <li></li>

            <li>

                <button class="live">编辑</button>

                <button class="die">删除</button>

            </li>

        </ul>

        <ul>

            <li> <input type="checkbox"></li>

            <li>4</li>

            <li>11</li>

            <li>2018-05-15 09:59:25</li>

            <li></li>

            <li>

                <button class="live">编辑</button>

                <button class="die">删除</button>

            </li>

        </ul>

    </div>

   全选框，点击第一个选框，下面全部选中

 // 全选框

        $('input[type="checkbox"]').eq(1).click(function () {

            if ($(this).prop("checked")) {



                $('ul input').prop('checked', true)

            } else {

                $("ul input").prop('checked', false)

            }

        })

        // 全选框删除

        function delete1() {

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

                $(this).parents('ul').remove();

            })

        }

        delete1();

添加框

<!-- /* 添加框 */ -->

    <div class="add">

        <input type="text" placeholder="输入你的部门名称">

        <input type="text" placeholder="输入你的部门代码">

        <button>确定</button>

        <button>取消</button>

    </div>


 $('.one button').eq(1).click(function () {

            $(".add").css('display', 'block')

            $('.add button').eq(0).off('click')

            $('.add button').eq(0).click(function () {

                // 获取当前时间

                var time = new Date();

                var year = time.getFullYear();

                var month = time.getMonth() + 1;

                var date = time.getDate();

                var hour = time.getHours();

                var minute = time.getMinutes();

                var second = time.getSeconds();



                function standard(time) {

                    return time < 10 ? '0' + time : time;

                }

                var newTime = `${year}-${standard(month)}-${standard(date)} ${standard(hour)}:${standard(minute)}:${standard(second)}`;



                var dom3 = [{

                    name: $('.add input').eq(0).val(),

                    num: $('.add input').eq(1).val()

                }]

                dom3.forEach(function (e, index) {

                    var cloneDom3 = $('.tp').clone(true).removeClass("tp");

                    cloneDom3.find('li').eq(1).text(e.name).next().text(e.num).next().text(newTime)

                    cloneDom3.appendTo($('.one'));

                })

                console.log(2);

                // 点击确定后清空原本数据

                $('.add input').eq(0).val("");

                $('.add input').eq(1).val("");

                $(".add").css('display', 'none')

            })

            // 点击取消后清空原本数据

            $('.add button').eq(1).click(function () {

                $(".add").css('display', 'none')

                $('.add input').eq(0).val("");

                $('.add input').eq(1).val("");

            })

        })

      编辑框和添加框为同一个样式

 // 编辑

        function liveFn() {

            $('.live').click(function (e) {

                $(".add").css('display', 'block')

                $('.add button').eq(0).off('click')

                $('.add button').eq(0).click(function () {

                    // 获取当前时间

                    var time = new Date();

                    var year = time.getFullYear();

                    var month = time.getMonth() + 1;

                    var date = time.getDate();

                    var hour = time.getHours();

                    var minute = time.getMinutes();

                    var second = time.getSeconds();

                    function standard(time) {

                        return time < 10 ? '0' + time : time;

                    }

                    var newTime = `${year}-${standard(month)}-${standard(date)} ${standard(hour)}:${standard(minute)}:${standard(second)}`;

                    var s = $('.add input').eq(0).val()

                    var j = $('.add input').eq(1).val()

                    // 找到要改的那个li

                    $(e.target).parent().prev().prev().prev().prev().text(s)

                    $(e.target).parent().prev().prev().prev().text(j)

                    $(e.target).parent().prev().prev().text(newTime);

                    // 点击确定后清空原本数据

                    $('.add input').eq(0).val("");

                    $('.add input').eq(1).val("");

                    $(".add").css('display', 'none')

                    // console.log(3);

                })

                // 点击取消后清空原本数据

                $('.add button').eq(1).click(function () {

                    $(".add").css('display', 'none')

                    $('.add input').eq(0).val("");

                    $('.add input').eq(1).val("");

                })

            })

        }

        liveFn();

 查询用的是模糊查询

  // 查询

        $('.one button').eq(0).on('click', function () {

            // 第一个搜索框内容框不为空

            if ($('.one input').eq(0).val()) {

                // 创建新数组存储部门名称

                var arr = [];

                for (var i = 0; i < $('.one ul').length - 1; i++) {

                    arr.push($('.one ul').eq(i + 1).find('li').eq(1).text())

                }

                searchFun(arr, '#department')

            }

        })

        function searchFun(arr, selector) {

            var length = arr.length;

            // 遍历数组查询

            for (var j = 0; j < arr.length; j++) {

                if (arr[j].indexOf($(selector).val()) >= 0) {

                    var search = $('.tp').clone().removeClass("tp");

                    // 为搜索到的内容添加进克隆列表

                    search.find('li').eq(1).text($('.one ul').eq(j + 1).find('li').eq(1).text())

                        .next().text($('.one ul').eq(j + 1).find('li').eq(2).text())

                        .next().text($('.one ul').eq(j + 1).find('li').eq(3).text())

                    $('.one').append(search)

                    liveFn();

                    delete1();

                }

            }

            // 将前几项从页面删除

            for (var k = 0; k < length; k++) {

                $('.one ul').eq(1).remove();

            }

        }

 

完整代码：

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

    <title>Document</title>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.3/jquery.js"></script>

    <style>

        .one {

            width: 1300px;

            height: 600px;

            margin: 0 auto;

        }



        ul li {

            list-style: none;

            float: left;

            font-size: 18px;

            width: 190px;

            height: 70px;

            margin: 0;

            border: 1px solid;

            text-align: center;

            line-height: 70px;

        }



        ul {

            width: 1154px;

            height: 72px;

            box-sizing: border-box;

            margin: 0;

            padding: 0;

        }



        ul:nth-child(2n) {

            background-color: powderblue;

        }



        .one ul:nth-child(5) {

            margin-top: 40px;

        }



        .add {

            width: 300px;

            height: 200px;

            border: 1px solid;

            text-align: center;

            display: none;

            position: fixed;

            left: 0;

            top: 0;

            background-color: hotpink;

        }



        .add input {

            display: inline-block;

            width: 150px;

            height: 30px;

            margin-top: 20px;

        }



        .add button {

            width: 140px;

            height: 30px;

            margin-top: 20px;

        }



        .tp {

            display: none;

        }



        .live,

        .die {

            background-color: pink;

        }

    </style>

</head>



<body>

    <ul class="tp">

        <li> <input type="checkbox"></li>

        <li></li>

        <li></li>

        <li>2018-05-15 09:59:25</li>

        <li></li>

        <li>

            <button class="live">编辑</button>

            <button class="die">删除</button>

        </li>

    </ul>

    <div class="one">

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

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

        <button>搜索</button>

        <button>添加</button>

        <ul>

            <li>

                <input type="checkbox" class="uncheck">

            </li>

            <li>

                部门名称

            </li>

            <li>

                部门代码

            </li>

            <li>

                修改时间

            </li>

            <li>

                修改人

            </li>

            <li>

                操作

            </li>

        </ul>

        <ul>

            <li> <input type="checkbox"></li>

            <li>1</li>

            <li>11</li>

            <li>2018-05-15 09:59:25</li>

            <li></li>

            <li>

                <button class="live">编辑</button>

                <button class="die">删除</button>

            </li>

        </ul>

        <ul>

            <li> <input type="checkbox"></li>

            <li>1</li>

            <li>11</li>

            <li>2018-05-15 09:59:25</li>

            <li></li>

            <li>

                <button class="live">编辑</button>

                <button class="die">删除</button>

            </li>

        </ul>

        <ul>

            <li> <input type="checkbox"></li>

            <li>2</li>

            <li>11</li>

            <li>2018-05-15 09:59:25</li>

            <li></li>

            <li>

                <button class="live">编辑</button>

                <button class="die">删除</button>

            </li>

        </ul>

        <ul>

            <li> <input type="checkbox"></li>

            <li>3</li>

            <li>11</li>

            <li>2018-05-15 09:59:25</li>

            <li></li>

            <li>

                <button class="live">编辑</button>

                <button class="die">删除</button>

            </li>

        </ul>

        <ul>

            <li> <input type="checkbox"></li>

            <li>4</li>

            <li>11</li>

            <li>2018-05-15 09:59:25</li>

            <li></li>

            <li>

                <button class="live">编辑</button>

                <button class="die">删除</button>

            </li>

        </ul>

    </div>

    <!-- /* 添加框 */ -->

    <div class="add">

        <input type="text" placeholder="输入你的部门名称">

        <input type="text" placeholder="输入你的部门代码">

        <button>确定</button>

        <button>取消</button>

    </div>

    <script>

        // 全选框

        $('input[type="checkbox"]').eq(1).click(function () {

            if ($(this).prop("checked")) {



                $('ul input').prop('checked', true)

            } else {

                $("ul input").prop('checked', false)

            }

        })

        // 全选框删除

        function delete1() {

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

                $(this).parents('ul').remove();

            })

        }

        delete1();

        // 添加

        $('.one button').eq(1).click(function () {

            $(".add").css('display', 'block')

            $('.add button').eq(0).off('click')

            $('.add button').eq(0).click(function () {

                // 获取当前时间

                var time = new Date();

                var year = time.getFullYear();

                var month = time.getMonth() + 1;

                var date = time.getDate();

                var hour = time.getHours();

                var minute = time.getMinutes();

                var second = time.getSeconds();



                function standard(time) {

                    return time < 10 ? '0' + time : time;

                }

                var newTime = `${year}-${standard(month)}-${standard(date)} ${standard(hour)}:${standard(minute)}:${standard(second)}`;



                var dom3 = [{

                    name: $('.add input').eq(0).val(),

                    num: $('.add input').eq(1).val()

                }]

                dom3.forEach(function (e, index) {

                    var cloneDom3 = $('.tp').clone(true).removeClass("tp");

                    cloneDom3.find('li').eq(1).text(e.name).next().text(e.num).next().text(newTime)

                    cloneDom3.appendTo($('.one'));

                })

                console.log(2);

                // 点击确定后清空原本数据

                $('.add input').eq(0).val("");

                $('.add input').eq(1).val("");

                $(".add").css('display', 'none')

            })

            // 点击取消后清空原本数据

            $('.add button').eq(1).click(function () {

                $(".add").css('display', 'none')

                $('.add input').eq(0).val("");

                $('.add input').eq(1).val("");

            })

        })



        // 编辑

        function liveFn() {

            $('.live').click(function (e) {

                $(".add").css('display', 'block')

                $('.add button').eq(0).off('click')

                $('.add button').eq(0).click(function () {

                    // 获取当前时间

                    var time = new Date();

                    var year = time.getFullYear();

                    var month = time.getMonth() + 1;

                    var date = time.getDate();

                    var hour = time.getHours();

                    var minute = time.getMinutes();

                    var second = time.getSeconds();

                    function standard(time) {

                        return time < 10 ? '0' + time : time;

                    }

                    var newTime = `${year}-${standard(month)}-${standard(date)} ${standard(hour)}:${standard(minute)}:${standard(second)}`;

                    var s = $('.add input').eq(0).val()

                    var j = $('.add input').eq(1).val()

                    // 找到要改的那个li

                    $(e.target).parent().prev().prev().prev().prev().text(s)

                    $(e.target).parent().prev().prev().prev().text(j)

                    $(e.target).parent().prev().prev().text(newTime);

                    // 点击确定后清空原本数据

                    $('.add input').eq(0).val("");

                    $('.add input').eq(1).val("");

                    $(".add").css('display', 'none')

                    // console.log(3);

                })

                // 点击取消后清空原本数据

                $('.add button').eq(1).click(function () {

                    $(".add").css('display', 'none')

                    $('.add input').eq(0).val("");

                    $('.add input').eq(1).val("");

                })

            })

        }

        liveFn();




        // 查询

        $('.one button').eq(0).on('click', function () {

            // 第一个搜索框内容框不为空

            if ($('.one input').eq(0).val()) {

                // 创建新数组存储部门名称

                var arr = [];

                for (var i = 0; i < $('.one ul').length - 1; i++) {

                    arr.push($('.one ul').eq(i + 1).find('li').eq(1).text())

                }

                searchFun(arr, '#department')

            }

        })

        function searchFun(arr, selector) {

            var length = arr.length;

            // 遍历数组查询

            for (var j = 0; j < arr.length; j++) {

                if (arr[j].indexOf($(selector).val()) >= 0) {

                    var search = $('.tp').clone().removeClass("tp");

                    // 为搜索到的内容添加进克隆列表

                    search.find('li').eq(1).text($('.one ul').eq(j + 1).find('li').eq(1).text())

                        .next().text($('.one ul').eq(j + 1).find('li').eq(2).text())

                        .next().text($('.one ul').eq(j + 1).find('li').eq(3).text())

                    $('.one').append(search)

                    liveFn();

                    delete1();

                }

            }

            // 将前几项从页面删除

            for (var k = 0; k < length; k++) {

                $('.one ul').eq(1).remove();

            }

        }



    </script>

</body>



</html>

耶小业
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery 增删改查
fujingwu的博客
09-26 409
查： text() 查看元素文本 val() 查看元素值 html() 查看元素中的html 改： $(function(){ $('#btn').click(function(){ //修改元素text文本 $('#p').text('asd') //修改元素text文本 $('#p1').html('<p>1234164</p>') //修改元素的值 $('#ipt').val('1234164') }
jquery增删改查 mysql_Jquery+Ajax+PHP+MySQL分类增删改查
weixin_39769703的博客
02-05 200
本文将采用Jquery+Ajax+PHP+MySQL来实现客户分类的管理，操作结果提示用jNotify。下载资源下载积分：50积分表 ·catalist· CREATE TABLE `catalist` (`cid` int(11) NOT NULL auto_increment,`title` varchar(100) NOT NULL,`sort` mediumi...
Jquery实现增删改查
m0_64288219的博客
11-04 849
使用的技术 jquery bootstrap 实现功能：实现对数据的添加，删除，修改，查找 原理：利用jquery对dom操作
jQuery增删改查
qq_42400124的博客
09-07 2209
jQuery增删改查（图书管理） 演示效果： HTML代码： <div class="books"> <h3 class="titl">图书管理</h3> <table cellspacing="0" cellpadding="0"> <thead> <tr> <th><input type="checkbox" id="all" /></th> <th>作者
jQuery增删改查3
mzzzz0316的博客
10-07 54
jquery的增删改查方法
m0_47720236的博客
03-12 3194
一，查询(兄弟父子节点) ● next() 查找下一个兄弟元素 nextAll() 查询下面所有兄弟 nextUntil() 查到满足参数中条件的某个兄弟为止 ● prev() 查找上一个兄弟元素 ● siblings() 查找所有的兄弟元素 带参数时需要满足参数中的条件 ● parent() 获取元素自身的父元素 ● parents() 获取元素的所有祖先元素（自下往上 HTML为止） ● closest() 查询最近的满足条件的父级 从自己开始查找。如果什么都没找到则返回一个空的
使用jQuery实现增删改查
Uncle_sixsix的博客
09-07 9951
jquery用的是1.11版本 css就用bootstrap吧 因为增和改用了模态框修改，所以还用了bootstrap.js实现模态框的弹出和关闭 做了个简单的表格来实现功能 HTML代码段 //表格 &lt;div class="container" style="padding-top: 40px;"&gt; &lt;div class="form-group"&gt;...
jQuery实现增删改查（功能具体实现）
m0_75047254的博客
10-27 737
点击下载，不知道下载第几个的下载第一个即可，下载时，右键需要的jQuery，将他另存为到桌面，然后引用到文件中调用。使用 jQuery，您需要下载 jQuery 库，然后把它包含在希望使用的网页中。输入字符点击搜索，即可匹配显示，没有东西时点击搜索，可以查询全部。点击保存按钮，保存更改的信息，同时保存按钮消失，修改按钮显示。点击修改按钮，将tr的内容转化为input标签里面的内容。对于新添加的数据，我们对他的方法添加有两种方法。点击添加按钮 ，即可吧数据添加到table。同时修改按钮消失，保存按钮显示。
jQuery对table表格进行增删改查
10-20
以下是对jQuery实现表格增删改查功能的详细说明。 ### 增加记录 增加记录通常涉及在表格的tbody元素中插入新的行（tr）和单元格（td）。首先，我们需要创建一个表单让用户输入新数据，然后通过点击“新增”按钮...
C# jquery增删改查，带分页功能
08-24
本项目“C# jQuery增删改查，带分页功能”是针对后端基于C#语言的Web应用，结合前端jQuery技术实现的一种高效数据管理解决方案。 首先，让我们详细了解一下“增删改查”这一概念。在数据库管理中，CRUD（Create, ...
bootstrap增删改查页面
04-14
这个“bootstrap增删改查页面”显然与使用Bootstrap来设计和实现数据管理界面有关，通常包括添加、编辑、删除和查询等功能。下面我们将深入探讨Bootstrap在构建这种页面时的关键知识点。 1. **响应式布局**：...
ssm框架整合+jQuery+Bootstrap实现表格数据增删改查
03-01
这个项目结合了jQuery和Bootstrap，旨在为开发者提供一个完整的Web应用解决方案，实现表格数据的增删改查功能。下面将详细阐述这些技术在实际应用中的作用和整合方式。 1. **Spring框架**：Spring是Java企业级应用...
BootStrapTable实现增删改查
03-07
在MVC（Model-View-Controller）架构中，结合C#后端，BootstrapTable可以实现数据的增删改查操作，提供用户友好的界面和高效的后台处理。 1. **BootstrapTable的基本结构** BootstrapTable的核心是HTML的`<table>`...
基于 uniapp html5plus API，怎么把图片保存到相册
前端原创分享，常年坚持记录和分享，全网阅读量超百万
08-04 978
要将图片保存到相册中，可以使用HTML5+ API中的方法。
HTML-05新浪新闻-正文-排版
程小白的博客
08-03 176
【代码】【无标题】
原神自定义倒计时
最新发布
lulei5153的博客
08-04 529
【代码】原神自定义倒计时。
HTML 段落
wjs2024的博客
08-04 270
HTML（超文本标记语言）是构建网页的标准语言，而段落是构成网页内容的基本单元。在HTML中，段落是通过<p>标签来定义的。本文将详细介绍HTML段落的相关知识，包括段落的基本结构、样式设置、以及在实际网页设计中的应用。
jquery ajax动态增删改查
07-18
jQuery的Ajax功能允许前端JavaScript通过异步请求向服务器发送数据并获取响应，非常适合用于动态增删改查操作。以下是一些基本步骤： 1. **创建Ajax请求**： 使用`$.ajax()`函数，需要设置URL、HTTP方法（如GET、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值