ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

关于简易的增删改查

2021-09-22 21:06:00  阅读:132  来源: 互联网

标签:val border 改查 height 简易 增删 input eq find


效果展示:

主要三个文件:html+css+js 

 html文件:

<!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="../jquery-1.1.3.js"></script>
    <link rel="stylesheet" href="./reset.css">
    <link rel="stylesheet" href="./后台管理系统.css">
</head>

<body>
    <div class="all">
        <!-- 左边侧边栏 -->
        <div class="aside">
            <!-- log -->
            <div class="logbox"></div>
            <!-- 管理内容 -->
            <div class="aside-a">基础管理

                <div class="sanjiao"></div>
            </div>
            <div class="aside-a">订单管理

                <div class="sanjiao"></div>
            </div>
            <div class="aside-a">系统管理
                <div class="sanjiao"></div>
            </div>
            <div class="aside-a">文件管理
                <div class="sanjiao"></div>
            </div>
        </div>
        <!-- 右边主体 -->
        <div class="container">
            <!-- 头部 -->
            <div class="container-head">
                <!-- 按钮 -->
                <div class="head-button">缩小图标</div>
                <!-- 管理员 -->
                <div class="headuser">超级管理员</div>
            </div>
            <!-- 主要内容 -->
            <div class="container-main">
                <div class="container-main-1">
                    <!-- 首页 -->
                    <div class="container-mian-1-top">
                        <span>首页</span>
                        <i></i>
                        <span>商品管理</span>
                    </div>
                    <!-- 搜索 -->
                    <div class="search">
                        <span>搜索:</span>
                        <input type="text" placeholder="请输入部门">
                        <input type="text" placeholder="请输入部门代码">
                        <button>搜索</button>
                        <button>添加</button>
                    </div>
                    <!-- 表格 -->
                    <div class="table">
                        <div class="thead">
                            <ul>
                                <li><input type="checkbox" id="checkAll"></li>
                                <li>部门名称</li>
                                <li>部门代码</li>
                                <li>修改时间</li>
                                <li>修改人</li>
                                <li>操作</li>
                            </ul>
                        </div>
                        <div class="tbody">
                            <!-- <ul class="a">
                                <li class='checkchild'><input type="checkbox"></li>
                                <li></li>
                                <li></li>
                                <li> </li>
                                <li></li>
                                <li><button class="delete">删除</button>
                                    <button class="change">修改</button>
                                </li>
                            </ul> -->

                        </div>
                        <!-- 修改框 -->
                        <div class="changer">
                            <h1 style="font-size: 18px;color: #ccc;">修改框</h1>
                            <input type="text" name="" id="one" placeholder="请输入部门"><br>
                            <input type="text" name="" id="two" placeholder="请输入部门代码"><br>
                            <input type="text" name="" id="three" placeholder="修改人"><br>
                            <span id="no">取消</span>
                            <span id="yes">保存</span>
                        </div>
                        <!-- 添加框 -->
                        <div class="add">
                            <h1 style="font-size: 18px;color: #ccc;">添加框</h1>
                            <input type="text" name="" id="one1" placeholder="请输入部门"><br>
                            <input type="text" name="" id="two2" placeholder="请输入部门代码"><br>
                            <input type="text" name="" id="three3" placeholder="修改人"><br>
                            <span id="no1">取消</span>
                            <span id="yes1">保存</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <script>
        //初始 创建一个自定义数组
        var arr = [{
            className: '财务部门',
            classCode: '1100',
            time: '2020-08-03 14:40:06',
            name: 'abc'
        }, {
            className: '设计部门',
            classCode: '1101',
            time: '2020-08-03 14:40:06',
            name: 'cdf'
        }, {
            className: '销售部门',
            classCode: '1102',
            time: '2020-08-03 14:40:06',
            name: 'ddd'
        }, {
            className: '运营部门',
            classCode: '1103',
            time: '2020-08-03 14:40:06',
            name: 'hhh'
        }, {
            className: '后勤部门',
            classCode: '1104',
            time: '2020-08-03 14:40:06',
            name: 'ggg'
        }]




        // 数据渲染页面函数
        function getdata(arr) {
            // 每一次进入渲染时清空之前所有的
            $('.tbody').html('');
            // 循环数组
            arr.forEach(function(item, index) {
                // 判断是否有数组为内容渲染的节点
                if ($('.a').length === 0) {
                    // 没有就创建一个节点
                    var cloneDom = $(`  <ul class="a">
                                <li class='checkchild'><input type="checkbox"></li>
                                <li></li>
                                <li></li>
                                <li> </li>
                                <li></li>
                                <li><button class="delete">删除</button>
                                    <button class="change">修改</button>
                                </li>
                            </ul>`)
                } else {
                    // 有节点就克隆节点
                    var cloneDom = $('.a').eq(0).clone();
                }
                // 给节点传入值
                cloneDom.find('li').eq(1).text(item.className).next().text(item.classCode).next().text(item.time).next().text(item.name);
                // 将每个ul的下标数据保存到index
                cloneDom.data('index', index);

                $('.tbody').append(cloneDom);
            })
        }
        getdata(arr);




        // 添加功能
        // 添加弹框
        $('.search').find('button').eq(1).on('click', function() {
            $('.add').css('display', 'block');

        })
        $('.add').on('click', '#yes1', function(e) {
            if ($(e.target).is('#yes1')) {
                $('.add').css('display', 'none');
                if ($('.add').find('input').eq(0).val()) {

                    arr.push({
                            className: $('.add').find('input').eq(0).val(),
                            classCode: $('.add').find('input').eq(1).val(),
                            time: gettime(),
                            name: $('.add').find('input').eq(2).val()
                        })
                        // 清空每一次添加框的内容
                    $('.add').find('input').eq(0).val('')
                    $('.add').find('input').eq(1).val('')
                    $('.add').find('input').eq(2).val('')
                    getdata(arr);
                }

            }
        })
        $('.add').on('click', '#no1', function(e) {
            if ($(e.target).is('#no1')) {
                $('.add').css('display', 'none');
            }
        })



        // 获取时间
        function gettime() {
            var timer = new Date()
            var year = timer.getFullYear();
            var month = timer.getMonth() + 1;
            if (month < 10) month = '0' + month;
            var date = timer.getDate();
            if (date < 10) date = '0' + date;
            var hours = timer.getHours();
            if (hours < 10) hours = '0' + hours;
            var minutes = timer.getMinutes();
            if (minutes < 10) minutes = '0' + minutes;
            var seconds = timer.getSeconds();
            if (seconds < 10) seconds = '0' + seconds;
            return `${year}-${month}-${date} ${hours}:${minutes}:${seconds}`
        }

        // 删除功能
        $('.tbody ').click(function(e) {
                if ($(e.target).is('.delete')) {
                    $(e.target).parent().parent().data('index')
                    arr.splice($(e.target).parent().parent().data('index'), 1);
                    getdata(arr);
                }
            })
            // 修改功能
            // 修改弹框

        $('.tbody').on('click', 'button', function(e) {
            if ($(this).text() === '修改') {
                $('.changer').css('display', 'block');
                $('.changer').find('span').eq(1).data('data', $(this))

            }
        })


        // 修改
        $('.changer').find('span').eq(1).on('click', function() {
            //判断输入的公司部门的值是否为空
            if ($('.changer').find('input').eq(0).val()) {
                arr[$(this).data('data').parent().parent().data('index')].className = $('.changer').find('input').eq(0).val();
                $('.changer').find('input').eq(0).val('')

            }
            //判断输入的部门代码的值是否为空
            if ($('.changer').find('input').eq(1).val()) {
                arr[$(this).data('data').parent().parent().data('index')].classCode = $('.changer').find('input').eq(1).val();
                $('.changer').find('input').eq(1).val('')

            }
            //判断输入的操作员的值是否为空
            if ($('.changer').find('input').eq(2).val()) {
                arr[$(this).data('data').parent().parent().data('index')].name = $('.changer').find('input').eq(2).val();
                $('.changer').find('input').eq(2).val('')

            }
            arr[$(this).data('data').parent().parent().data('index')].time = gettime();
            getdata(arr);
        })


        // 隐藏修改框
        $('.changer').on('click', function(e) {
            if (this === e.target) {
                $('.changer').css('display', 'none');
            }
        })
        $('.changer').find('span').click(function() {
            $('.changer').css('display', 'none');
        })

        // 查询功能
        $('.search').find('button').eq(0).on('click', function() {
            // 创建查询之后的新数组
            var newarr = [];
            // 判断两个搜索框是否为空,为空不进入

            if ($('.search').find('input').eq(0).val() || $('.search').find('input').eq(1).val()) {
                arr.forEach(function(item, index) {
                        // 判断部门名称是否有值
                        if ($('.search').find('input').eq(0).val() != '') {
                            if (`${item.className}`.indexOf($('.search').find('input').eq(0).val()) != -1) {
                                // 有相同内容,就添加到新数组里去 
                                newarr.push(item)
                            }
                        }
                        // 判断部门代码搜索框是否有值
                        if ($('.search').find('input').eq(1).val() != '') {
                            if (`${item.classCode}`.indexOf($('.search').find('input').eq(1).val()) != -1) {
                                // 有相同内容,就添加到新数组里去 
                                newarr.push(item)
                            }
                        }
                    })
                    // 渲染搜索内容数组的内容
                getdata(newarr);

            }
        })

        // 全选按钮实现
        // 点击全选按钮,下面的全部选中
        $('#checkAll').on('click', function() {
            $('.tbody input[type="checkbox"]').prop('checked', this.checked);
        })
    </script>
</body>

</html>

css文件:

* {
    padding: 0;
    margin: 0;
}


/* 主页面 */

.all {
    display: flex;
    width: 1920px;
    height: 1080px;
    flex-direction: row;
    justify-content: right;
    ;
}


/* 左边侧边栏 */

.all .aside {
    width: 12.5%;
    height: 100%;
    background-color: #334157;
}

.aside-a {
    width: 200px;
    height: 56px;
    padding: 0 20px;
    text-align: left;
    line-height: 56px;
    color: #fff;
    font-size: 16px;
}


/* 添加下三角按钮 */

.sanjiao {
    margin-left: 120px;
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 5px solid #ccc;
    border-bottom: 5px solid transparent;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}

.logbox {
    width: 240px;
    height: 40px;
    padding: 20px 0;
}

.aside-a:hover {
    background-color: #6a6c6e;
}


/* 右边主体 */

.container {
    display: flex;
    width: 97.5%;
    height: 1080px;
    flex-direction: column;
    border: 1px solid;
}


/* 头部 */

.container-head {
    width: 100%;
    height: 60px;
    background-color: #334157;
    color: #fff;
}

.headuser {
    width: 90px;
    height: 60px;
    float: right;
    text-align: center;
    padding: 0 20px;
    line-height: 60px;
}

.head-button {
    width: 40px;
    height: 60px;
    text-align: center;
    float: left;
}


/* 主要内容 */

.container-main {
    width: 100%;
    height: 1020px;
}

.container-main-1 {
    width: 1623px;
    height: 463px;
    margin: auto;
    margin-top: 20px;
    /* background-color: aqua; */
}


/* 搜索框 */

.search {
    width: 100%;
}


/*按钮样式 */

button {
    width: 100px;
    height: 30px;
    background-color: #5c9aff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}


/* 表格 */

.table {
    width: 100%;
    height: 325px;
    margin-left: 20px;
    margin-top: 20px;
}

.table ul {
    width: 100%;
    height: 45px;
}

.table ul li {
    float: left;
    width: 280px;
    height: 45px;
    border: 1px solid;
    text-align: center;
    line-height: 45px;
}


/* 全选框样式 */

.table ul li:first-of-type {
    width: 105px;
}


/* 修改框 */

.changer {
    text-align: center;
    position: absolute;
    top: 220px;
    left: 800px;
    width: 212px;
    height: 220px;
    background-color: #f5f5f5;
    display: none;
}

.changer span {
    float: left;
    margin: 10px 15px;
    padding: 2px 21px;
    text-align: center;
    line-height: 1em;
    box-sizing: border-box;
    cursor: pointer;
    background: #fff;
    border-radius: 10px;
}

.changer input {
    margin: 18px;
    border: 1px solid rgb(243, 235, 235);
    border-radius: 5px;
}


/* 添加框 */

.add {
    text-align: center;
    position: absolute;
    top: 125px;
    left: 615px;
    width: 212px;
    height: 220px;
    background-color: #f5f5f5;
    display: none;
}

.add span {
    float: left;
    margin: 10px 15px;
    padding: 2px 21px;
    text-align: center;
    line-height: 1em;
    box-sizing: border-box;
    cursor: pointer;
    background: #fff;
    border-radius: 10px;
}

.add input {
    margin: 18px;
    border: 1px solid rgb(243, 235, 235);
    border-radius: 5px;
}

 重置样式reset.css


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	/* 字体类型 */
font-family: "Microsoft YaHei", "微软雅黑", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif;
}
/* 旧浏览器的HTML5显示角色重置 */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a {
	text-decoration: none;
	color: inherit;
}
.clearfix::after {
	content: "";
	display: block;
	clear: both;
}
input {
	border: 0;
	outline: none;
}
body {
    background-color: rgb(248, 248, 248);
}
a:hover {
	cursor: pointer;
}

标签:val,border,改查,height,简易,增删,input,eq,find
来源: https://blog.csdn.net/qq_49378268/article/details/120422655

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有