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>
    

      

  • 相关阅读:
    P1030 求先序排列 P1305 新二叉树
    spfa
    Clairewd’s message ekmp
    Cyclic Nacklace hdu3746 kmp 最小循环节
    P1233 木棍加工 dp LIS
    P1052 过河 线性dp 路径压缩
    Best Reward 拓展kmp
    Period kmp
    Substrings kmp
    Count the string kmp
  • 原文地址:https://www.cnblogs.com/njuwyx/p/11661944.html
Copyright © 2011-2022 走看看