zoukankan      html  css  js  c++  java
  • 模态框扩展

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="x-ua-compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>周末作业</title>
        <style>
            .cover {
                position: fixed;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                background-color: #616166;
                opacity: 0.4;
                z-index: 999;
            }
    
            .model {
                 600px;
                height: 400px;
                background-color: white;
                position: fixed;
                left: 50%;
                top: 50%;
                margin-left: -300px;
                margin-top: -200px;
                z-index: 1000;
            }
    
            .hide {
                display: none;
            }
        </style>
    </head>
    <body>
    <button class="add">add</button>
    
    <table border="2">
        <thead>
        <tr>
            <th>#</th>
            <th>name</th>
            <th>hooby</th>
            <th rowspan="2">operation</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>egon</td>
            <td>dance</td>
            <td>
                <button class="edit">edit</button>
                <button class="delete">delete</button>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>yuanju</td>
            <td>fucksky</td>
            <td>
                <button class="edit">edit</button>
                <button class="delete">delete</button>
            </td>
        </tr>
        <tr>
            <td>3</td>
            <td>alex</td>
            <td>haircut</td>
            <td>
                <button class="edit">edit</button>
                <button class="delete">delete</button>
            </td>
        </tr>
        </tbody>
    </table>
    <div id="myCover" class="cover hide"></div>
    <div id="myModel" class="model hide">
        <label for="model-name">name</label>
        <input id="model-name" type="text">
        <label for="model-hobby">hobby</label>
        <input id="model-hobby" type="text">
        <button class="submit" id="model-submit">提交</button>
        <button class="close" id="model-close">关闭</button>
    </div>
    
    <script src="jquery-3.4.1.js"></script>
    <script>
        //show model
        function showModel() {
            $('#myCover,#myModel').removeClass('hide');
        }
    
        //close model
        function closeModel() {
            $('#myModel').find('input').val('');  //清空模态框中的input
            $('#myCover,#myModel').addClass('hide');
        }
    
        //给新增绑定事件
        $('.add').on('click', function () {
            showModel();
        });
        //弹出模态框
    
    
        //取消按钮
        $('.close').on('click', function () {
            //$('#myModel input').val(''); 效率低
            closeModel();//隐藏模态框
        });
        //edit绑定
        //需要使用事件委托 基于已经存在的元素(页面加载完后存在的标签)绑定事件
        $('tbody').on('click','.edit', function () {
            showModel();
            //将原来的数据填写到模块框中的input
            var $currentTrEle = $(this).parent().parent();
            //将当前行jquery对象保存,用于判断提交是新增还是编辑下的模块框提交
            $('#myModel').data('currentTr', $currentTrEle);
            var name = $currentTrEle.children().eq(1).text();
            var hobby = $currentTrEle.children().eq(2).text();
            $('#model-name').val(name);
            $('#model-hobby').val(hobby);
    
        })
    
    
        //模态框中的提交按钮绑定事件
        $('#model-submit').on('click', function () {
            //取到用户填写的input的值.
            var name = $('#model-name').val();
            var hobby = $('#model-hobby').val();
            var $myModelEle = $('#myModel')
            //根据编辑还是新增做不同的操作
            //若编辑,根据先前编辑按钮的一行
            //难点在于如何让确定先前编辑哪一行,利用data方法存具体的jquery对象
            var $currentTrEle = $myModelEle.data('currentTr')
            if ($currentTrEle !== undefined){
                //edit状态
                $currentTrEle.children().eq(1).text(name);
                $currentTrEle.children().eq(2).text(hobby);
                //清空之前保存的当前行
                $myModelEle.removeData()
            }else{
                //创建TR标签,将得到的数据填写进去
            var trEle = document.createElement('tr');
            var number = $('tr').length
            $(trEle).html(
                '<td>' + number + '</td>' +
                '<td>' + name + '</td>' +
                '<td>' + hobby + '</td>' +
                '<td><button class="edit">edit</button> <button class="delete">delete</button></td>'
            );
            //若新增,则生成一条新的tr,加到label最后
            //添加数据到tbody中
            $('tbody').append(trEle);
            }
          closeModel()
        });
    
        $('tbody').on('click','.delete',function () {
            //删除点积删除按钮的当前行
            var $currentTrEle = $(this).parent().parent();
            //更新tbody序号
            //找到当前行后所有的tr,依次更新序号
            $currentTrEle.nextAll().each(function () {
                //取到原来的序号
                var oldnumber = $(this).children().first().text();
                $(this).children().first().text(oldnumber-1) ;
            $currentTrEle.remove();
            })
        })
    </script>
    </body>
    </html>
    

      

  • 相关阅读:
    Json概述以及python对json的相关操作
    tcpdump学习(2):基本使用
    tcpdump学习(1):安装
    mysql的expain(zz)
    ubuntu下使用mysql的一点笔记
    mysql的mysqladmin的用法
    mysql的一些工具(系统自带)
    django 分页django-pure-pagination(zz)
    mysql之any,some all(zz)
    Docker Ubuntu容器安装ping(zz)
  • 原文地址:https://www.cnblogs.com/njuwyx/p/11661944.html
Copyright © 2011-2022 走看看