关于简易的增删改查

2024-02-29 15:22:10

效果展示:

主要三个文件: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;
}

码农公寓

相关文章