Jquery实现增删改查

最新推荐文章于 2024-05-13 18:00:12 发布
十假杰出青年
最新推荐文章于 2024-05-13 18:00:12 发布
阅读量832
点赞数 1
分类专栏： js 文章标签： jquery javascript 前端
本文链接：https://blog.csdn.net/m0_64288219/article/details/127684028
版权
js 专栏收录该内容
17 篇文章 0 订阅
订阅专栏
在这里插入图片描述
使用的技术 jquery bootstrap
实现功能：实现对数据的添加，删除，修改，查找
原理：利用jquery对dom操作
<!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>
    <!--     新 Bootstrap 核心 CSS 文件-->
    <link rel="stylesheet"
          href="../../../插件/Bootstrap5/http_cdn.staticfile.org_twitter-bootstrap_4.4.1_css_bootstrap.css">
    <!--    // jQuery文件。务必在bootstrap.min.js 之前引入-->
    <script src="../../../插件/Bootstrap5/http_cdn.staticfile.org_jquery_3.4.1_jquery.js"></script>
    <!--    // bootstrap 的弹窗、提示、下拉菜单，需要 popper.min.js 才完美定位-->
    <script src="../../../插件/Bootstrap5/http_cdn.staticfile.org_popper.js_1.16.0_umd_popper.js"></script>
    <!--    // 最新的 Bootstrap 核心 JavaScript 文件-->
    <script src="../../../插件/Bootstrap5/http_cdn.staticfile.org_twitter-bootstrap_4.4.1_js_bootstrap.js"></script>
    <style>
        body {
            width: 100%;
            height: 100%;
        }

        .a {
            float: right;
            width: 1680px;
            height: 60px;
            background: url(2.PNG) no-repeat 0px 0px/100% 100%;
        }

        .b {
            float: left;
            width: 240px;
            height: 900px;
            background: url(1.PNG) no-repeat 0px 0px/100% 100%;
        }

        .Div {
            max-width: 1000px;
            max-height: 400px;
            overflow: scroll;
            position: absolute;
            left: 300px;
            top: 100px;

        }

        .Div1 {
            max-width: 100%;
            height: auto;
            margin: 20px 0px;
            display: inline-block;
            text-align: center;
        }

        .Div1 input {
            padding: 10px;
            border: 1px solid #999;
            outline-color: #66b1ff;
            border-radius: 3px;
        }

        .Div1 button {
            padding: 6px 16px;
        }

        .Div2 {
            border-image: linear-gradient(to right, #8f41e9, #578aef) 1;
            border-left: 1px solid #999;
            border-top: 1px solid #999;

            width: 954px;
        }

        .Div2 ul {
            margin: 0;
        }

        .Div2 ul li {
            border-bottom: 1px solid #999;
            border-right: 1px solid #999;
            padding: 10px;
        }

        .Div2 ul div {
            display: flex;
            justify-content: center;
            align-items: center;
            border-bottom: 1px solid #999;
            border-right: 1px solid #999;
        }

        .button1 {
            border-radius: 3px;
            border: 1px solid #999;
            padding: 5px 10px;
        }

        .button2 {
            background-color: rgb(240, 112, 112);
            border-radius: 3px;
            border: 0px;
            padding: 6px 11px;
        }

        .Div2-1 {
            max-width: 100%;
            height: auto;
            text-align: center;
        }

        .Div2-2 {
            display: block;
            max-width: 100%;
            height: auto;
        }

        .Div ul {
            display: flex;
            padding: 0;
        }

        .Div ul input {
            margin: 0px 20px;

        }

        .Div li {
            width: 180px;
            list-style: none;
            text-align: center;
        }

        .Div3 {
            display: none;
            background: rgba(0, 0, 0, 0.5);
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }

        .Div3-1 {
            width: 340px;
            height: 260px;
            background: white;
            position: absolute;
            left: 0;
            right: 0;
            top: 300px;
            margin: auto;

        }

        .Div3-1-1 {
            width: 300px;
            margin-left: 20px;
            margin-bottom: 20px;
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
        }

        .Div3-1-1 span {
            font-size: 18px;
        }

        .Div3-1-1 .X {
            color: #999;
            cursor: pointer;

        }

        .Div3-1-1 .X:hover {
            color: #66b1ff;
        }

        .Div3-1-2 {
            padding: 0px 60px;
            display: flex;
            margin-bottom: 10px;
        }

        .Div3-1-2 span {
            font-size: 14px;
            color: #666;
            line-height: 39px;
            margin-right: 10px;
        }

        .Div3-1-2 input {
            width: 140px;
            padding: 5px;
            /*border: 1px solid red;*/
            border-image: linear-gradient(to right, #8f41e9, #578aef) 1;
        }

        .Div3-1-3 {
            padding: 0px 60px;
            display: flex;
            margin-bottom: 10px;
        }

        .Div3-1-3 span {
            font-size: 14px;
            color: #666;
            line-height: 39px;
            margin-right: 10px;
        }

        .Div3-1-3 input {
            width: 140px;
            padding: 5px;
            border-image: linear-gradient(to right, #8f41e9, #578aef) 1;
        }

        .Div3-1-4 {
            padding: 0px 60px;
            display: flex;
            margin-bottom: 10px;
        }

        .Div3-1-4 span {
            font-size: 14px;
            color: #666;
            line-height: 39px;
            margin-right: 10px;
        }

        .Div3-1-4 input {
            width: 140px;
            padding: 5px;
            margin-left: 5px;
            border-image: linear-gradient(to right, #8f41e9, #578aef) 1;
        }

        .Div3-1-5 {
            float: right;
            margin-right: 60px;
            margin-top: 10px;
        }

        .Div3-1-5 .D3-bt1 {
            padding: 6px 12px;
            border: 1px solid #999;
            border-radius: 3px;
            margin-right: 10px;
            cursor: pointer;
        }

        .Div3-1-5 .D3-bt2 {
            padding: 6px 12px;
            border: 1px solid #66b1ff;
            background-color: #66b1ff;
            border-radius: 3px;
            cursor: pointer;


        }
        /*设置透明背景图片*/
        body:before{
            background: url("img.png") no-repeat;
            background-size: cover;
            content: '';
            position: absolute;
            width: 1920px;
            height: 1080px;
            top: 0;
            left: 0;
            z-index: -1;
            filter: blur(3px);

        }
        ::-webkit-scrollbar {
            /*隐藏滚轮*/
            display: none;
        }
        .Div li{
            font-size: large;
            color: #3ea2ee;
        }
    </style>

</head>
<body>

<div class="container mt-3" style="display: inline-block">
    <!--    <h2>闪烁的加载效果</h2>-->
    <!--    <p>使用 .spinner-grow 类来设置闪烁的加载效果:</p>-->

    <div class="spinner-grow text-muted"></div>
    <div class="spinner-grow text-primary"></div>
    <div class="spinner-grow text-success"></div>
    <div class="spinner-grow text-info"></div>
    <div class="spinner-grow text-warning"></div>
    <div class="spinner-grow text-danger"></div>
    <div class="spinner-grow text-secondary"></div>
    <div class="spinner-grow text-dark"></div>
    <div class="spinner-grow text-light"></div>
</div>
<div class="container mt-3" style="display: contents">
    <!--    <h2>闪烁的加载效果</h2>-->
    <!--    <p>使用 .spinner-grow 类来设置闪烁的加载效果:</p>-->

    <div class="spinner-grow text-muted"></div>
    <div class="spinner-grow text-primary"></div>
    <div class="spinner-grow text-success"></div>
    <div class="spinner-grow text-info"></div>
    <div class="spinner-grow text-warning"></div>
    <div class="spinner-grow text-danger"></div>
    <div class="spinner-grow text-secondary"></div>
    <div class="spinner-grow text-dark"></div>
    <div class="spinner-grow text-light"></div>
</div>

<div class="a"></div>
<div class="b"></div>
<div class="Div">
    <div class="Div1 form-floating container">
        <input type="text" id="gameName" class="form-control" placeholder="输入游戏名称">
        <label for="gameName"></label>
        <input type="text" placeholder="输入游戏代码">
        <button class="D1-button1 btn-primary">
            <i></i>
            <span >搜索</span>
        </button>
        <button class="D1-button2 btn-secondary">
            <i></i>
            <span>添加</span>
        </button>
    </div>

    <!-- 表格 -->
    <div class="Div2 table table-hover">
        <div class="Div2-1">
            <ul>
                <div>
                    <input type="checkbox">
                </div>
                <li>游戏名称</li>
                <li>游戏代码</li>
                <li>修改时间</li>
                <li>修改人</li>
                <li>操作</li>
            </ul>
        </div>

        <div class="Div2-2">
            <ul>
                <div>
                    <input type="checkbox">
                </div>
                <li>古墓丽影</li>
                <li>2111</li>
                <li>2018-05-15 09:59:25</li>
                <li>劳拉</li>
                <li>
                    <button class="button1 " type="button ">编辑</button>
                    <button class="button2" type="button">删除</button>
                </li>
            </ul>

            <ul>
                <div>
                    <input type="checkbox">
                </div>
                <li>刺客信条</li>
                <li>1352</li>
                <li>2018-05-19 11:23:20</li>
                <li>阿黛尔</li>
                <li>
                    <button class="button1" type="button">编辑</button>
                    <button class="button2" type="button">删除</button>
                </li>
            </ul>

            <ul>
                <div>
                    <input type="checkbox">
                </div>
                <li>彩虹6号</li>
                <li>3242</li>
                <li>2018-05-18 22:04:51</li>
                <li>橘子</li>
                <li>
                    <button class="button1" type="button">编辑</button>
                    <button class="button2" type="button">删除</button>
                </li>
            </ul>

            <ul>
                <div>
                    <input type="checkbox">
                </div>
                <li>双人成行</li>
                <li>1243</li>
                <li>2018-05-15 16:32:58</li>
                <li>忘了</li>
                <li>
                    <button class="button1" type="button">编辑</button>
                    <button class="button2" type="button">删除</button>
                </li>
            </ul>

<!--            <ul>-->
<!--                <div>-->
<!--                    <input type="checkbox">-->
<!--                </div>-->
<!--                <li>孤岛危机</li>-->
<!--                <li>2452</li>-->
<!--                <li>2018-05-16 14:45:07</li>-->
<!--                <li>只狼</li>-->
<!--                <li>-->
<!--                    <button class="button1" class="button1" type="button">编辑</button>-->
<!--                    <button class="button2" type="button">删除</button>-->
<!--                </li>-->
<!--            </ul>-->

        </div>
    </div>
</div>


<!-- 弹框 -->
<div class="Div3">
    <div class="Div3-1">
        <div class="Div3-1-1">
            <span>修改</span>
            <span class="X">X</span>
        </div>
        <div class="Div3-1-2">
            <span>游戏名称</span>
            <input type="text" placeholder="请输入游戏名称">
        </div>
        <div class="Div3-1-3">
            <span>游戏代码</span>
            <input type="text" placeholder="请输入游戏代码">
        </div>
        <div class="Div3-1-4">
            <span>修 改 人</span>
            <input type="text" placeholder="请输入修改人">
        </div>
        <div class="Div3-1-5">
            <button class="D3-bt1" type="button">取消</button>
            <button class="D3-bt2" type="button">保存</button>
        </div>
    </div>
</div>
<script>

    //调用全选方法
    chance()
    //全选方法
    function chance() {
        $(".Div2-1").find('input').eq(0).click(function () {
            if ($(this).prop('checked')) {

                $('input[type="checkbox"]').prop('checked', true)
            } else {
                $('input[type="checkbox"]').prop('checked', false)
            }
        })
        // 取消某一项的选择同时也取消全选按钮
        var D2 = $(".Div2-2").find('input');

        $(".Div2-2").find('input').click(function () {
            var flag = true;
            for (var i = 0; i < D2.length; i++) {
                if (!D2.eq(i).prop('checked')) {
                    flag = false;
                }

            }
            if (flag) {
                $(".Div2-1").find('input').eq(0).prop('checked', true)
            } else {
                $(".Div2-1").find('input').eq(0).prop('checked', false)
            }
        })
    };


    // 点击删除按钮
    Delete()

    function Delete() {
        $(".Div2-2").find('.button2').click(function () {
            console.log($(".Div2-2").find(".button2"));
            console.log($(this));
            console.log(Ul2);
            $(this).parents("ul")[0].remove();
            // for(var i = 0; i < Ul2.length; i++){
            //     if(Ul2[i] == $(this).parents("ul")[0]){
            //         console.log(Ul2[i]);
            //         console.log($(this.parents("ul")[0]))
            //         splice(i,1)
            //     }
            // }
        })
    };


    // 修改
    // 点击编辑按钮
    Fix()

    function Fix() {
        $(".Div2-2").find('.button1').click(function () {
            $(".Div3").css("display", "block");
            // 获取编辑修改时的部门名称值  腾讯  2111  徐宝宝
            var Company = $(this).parents('ul').find('li').eq(0).text();

            // 获取编辑修改时的部门代码值
            var Number = $(this).parents('ul').find('li').eq(1).text();
            // 获取编辑修改时的修改人值
            var Name = $(this).parents('ul').find('li').eq(3).text();
            var self = this;
            $('.Div3 input').eq(0).val(Company);
            $('.Div3 input').eq(1).val(Number);
            $('.Div3 input').eq(2).val(Name);


            // 点击保存
            $(".Div3").find('.D3-bt2').off('click')
            $(".Div3").find('.D3-bt2').click(function () {
                // 获取文本框输入内容
                var company = $('.Div3 input').eq(0).val();
                var number = $('.Div3 input').eq(1).val();
                var name = $('.Div3 input').eq(2).val();
                console.log(company);
                // 将插入的表格的数据替换成文本框输入的内容
                $(self).parents('ul').find('li').eq(0).text(company);
                $(self).parents('ul').find('li').eq(1).text(number);
                $(self).parents('ul').find('li').eq(3).text(name);

                // 获取时间
                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();
                var newTime = `${year}-${month}-${date} ${hour}:${minute}:${second}`;
                // 将插入的表格的时间替换成获取的时间
                $(self).parents('ul').find('li').eq(2).text(newTime);

                // 清空文本框
                $('.Div3 input').eq(0).val('');
                $('.Div3 input').eq(1).val('');
                $('.Div3 input').eq(2).val('');

                $(".Div3").css("display", "none");
            })
        })

    }


    // 添加
    // 点击添加按钮
    $(".Div1 .D1-button2").click(function () {
        $(".Div3").css("display", "block");

        // 点击保存
        $(".Div3").find('.D3-bt2').off('click')
        $(".Div3").find('.D3-bt2').click(function () {
            // 获取文本框输入内容
            var company = $('.Div3 input').eq(0).val();
            var number = $('.Div3 input').eq(1).val();
            var name = $('.Div3 input').eq(2).val();

            // 克隆表格中的第一个ul样式
            var Clone = $(".Div2-2").find('ul').eq(0).clone();
            //将获取的样式插入表格
            $(".Div2-2").eq(0).append(Clone);
            // 将插入的表格的数据替换成文本框输入的内容
            $(".Div2-2 ul").eq(-1).find('li').eq(0).text(company);
            $(".Div2-2 ul").eq(-1).find('li').eq(1).text(number);
            $(".Div2-2 ul").eq(-1).find('li').eq(3).text(name);

            // 获取时间
            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();
            var newTime = `${year}-${month}-${date} ${hour}:${minute}:${second}`;
            // 将插入的表格的时间替换成获取的时间
            $(".Div2-2 ul").eq(-1).find('li').eq(2).text(newTime);

            // 清空文本框
            $('.Div3 input').eq(0).val('');
            $('.Div3 input').eq(1).val('');
            $('.Div3 input').eq(2).val('');

            $(".Div3").css("display", "none");
            // 调用修改、删除、全选
            Fix()
            Delete()
            chance()
        })
    })

    // 点击X
    $(".Div3").find('.X').click(function () {
        // 清空文本框
        $('.Div3 input').eq(0).val('');
        $('.Div3 input').eq(1).val('');
        $('.Div3 input').eq(2).val('');

        $(".Div3").css("display", "none");
    })

    // 点击取消按钮
    $(".Div3").find('.D3-bt1').click(function () {
        // 清空文本框
        $('.Div3 input').eq(0).val('');
        $('.Div3 input').eq(1).val('');
        $('.Div3 input').eq(2).val('');

        $(".Div3").css("display", "none");
    })

    //点击搜按钮
    // Ul2储存未被选中的数组
    var Ul2 = [];

    // 点击搜索按钮
    $(".Div1 .D1-button1").click(function () {
        // 将Ul2中的数据添加到表格中

        $(".Div2-2").eq(0).append(Ul2)
        // 获取输入框内容
        var company = $('.Div1 input').eq(0).val();
        var number = $('.Div1 input').eq(1).val();

        var Ul1 = [];

        for (var i = 0; i < $(".Div2-2").find('ul').length; i++) {
            Li1 = $(".Div2-2").find('ul').eq(i).find('li').eq(0);
            Li2 = $(".Div2-2").find('ul').eq(i).find('li').eq(1);
            // 获取输入框和表格信息的对比返回值
            var textLi1 = Li1.text().indexOf(company);
            var textLi2 = Li2.text().indexOf(number);

            // 筛选符合要求的信息
            if (company != '' && textLi1 >= 0 && number == '') {
                Ul1.push($(".Div2-2").find('ul').eq(i))

            } else if (number != '' && company == '' && textLi2 >= 0) {
                Ul1.push($(".Div2-2").find('ul').eq(i))

            } else if (company != '' && number != '' && textLi1 >= 0 && Li2.eq(i + 1).text().indexOf(number) >= 0) {
                Ul1.push($(".Div2-2").find('ul').eq(i))

            } else {
                Ul2.push($(".Div2-2").find('ul').eq(i))

            }
        }
        // 移除表格全部信息
        $(".Div2-2").find("ul").remove();
        // 将符合要求的信息插入表格中
        $(".Div2-2").eq(0).append(Ul1)
        // 调用修改、删除、全选
        Fix()
        Delete()
        chance()
    })


</script>
</body>
</html>