jQuery-使用on委托注册实现动态数据的添加和删除

最新推荐文章于 2020-08-27 14:42:50 发布

gxgalaxy

最新推荐文章于 2020-08-27 14:42:50 发布

阅读量387

点赞数

分类专栏： JQuery 前端

本文链接：https://blog.csdn.net/gxgalaxy/article/details/103134110

版权

前端同时被 2 个专栏收录

33 篇文章 1 订阅

订阅专栏

JQuery

10 篇文章 0 订阅

订阅专栏

这里写自定义目录标题

必会知识点

on方法注册简单事件与委托事件

    1.on简单注册事件(不支持动态注册)
    两个参数：
    (1)事件名称
    (2)事件处理程序
    ```
    $('div').on('click',function(){
  //      console.log('我是单击事件');
    });
    ```
   2 on委托注册（给父元素注册事件）     //支持动态注册
   三个参数：
   (1)事件名称
   (2)要触发这个事件的元素
   (3)事件处理程序
    $('body').on('click','div',function(){
        console.log('单击事件');
    });

效果图

展示页面：
在这里插入图片描述
添加数据页面：

需求

    需求１：点击添加数据按钮，显示添加面板和遮罩层
    需求２：点击添加面板里面的关闭按钮，隐藏添加面板和遮罩层
    需求３：点击添加按钮里的添加按钮，会把输入的内容生成一个tr,这个tr添加到tbody中
    需求４：点击delete这些个a标签，删除对应的tr

源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../jquery-3.4.1.min.js"></script>
    <style>
            * {
                padding: 0;
                margin: 0;
            }
    
            .wrap {
                width: 410px;
                margin: 100px auto 0;
            }
    
            table {
                border-collapse: collapse;
                border-spacing: 0;
                border: 1px solid #c0c0c0;
            }
    
            th,
            td {
                border: 1px solid #d0d0d0;
                color: #404060;
                padding: 10px;
            }
    
            th {
                background-color: #09c;
                font: bold 16px ;
                color: #fff;
            }
    
            td {
                font: 14px ;
            }
    
            td a.get {
                text-decoration: none;
            }
    
            a.del:hover {
                text-decoration: underline;
            }
    
            tbody tr {
                background-color: #f0f0f0;
            }
    
            tbody tr:hover {
                cursor: pointer;
                background-color: #fafafa;
            }
    
            .btnAdd {
                width: 110px;
                height: 30px;
                font-size: 20px;
                font-weight: bold;
            }
    
            .form-item {
                height: 100%;
                position: relative;
                padding-left: 100px;
                padding-right: 20px;
                margin-bottom: 34px;
                line-height: 36px;
            }
    
            .form-item > .lb {
                position: absolute;
                left: 0;
                top: 0;
                display: block;
                width: 100px;
                text-align: right;
            }
    
            .form-item > .txt {
                width: 300px;
                height: 32px;
            }
    
            .mask {
                position: absolute;
                top: 0px;
                left: 0px;
                width: 100%;
                height: 100%;
                background: #000;
                opacity: 0.6;
                display: none;
            }
    
            #j_hideFormAdd {
                width: 22px;
                height: 22px;
                cursor: pointer;
                text-align: center;
                line-height: 22px;
                font-size: 18px;
            }
            #j_hideFormAdd:hover {
                background-color: skyblue;
            }
            .form-add {
                position: fixed;
                top: 30%;
                left: 50%;
                margin-left: -197px;
                padding-bottom: 20px;
                background: #fff;
                display: none;
            }
    
            .form-add-title {
                background-color: #f7f7f7;
                border-width: 1px 1px 0 1px;
                border-bottom: 0;
                margin-bottom: 15px;
                position: relative;
            }
    
            .form-add-title span {
                width: auto;
                height: 18px;
                font-size: 16px;
                font-weight: bold;
                color: rgb(102, 102, 102);
                text-indent: 12px;
                padding: 8px 0px 10px;
                margin-right: 10px;
                display: block;
                overflow: hidden;
                text-align: left;
            }
    
            .form-add-title div {
                width: 16px;
                height: 20px;
                position: absolute;
                right: 10px;
                top: 6px;
                font-size: 30px;
                line-height: 16px;
                cursor: pointer;
            }
    
            .form-submit {
                text-align: center;
            }
    
            .form-submit input {
                width: 170px;
                height: 32px;
            }
        </style>
</head>
<body>
     <!--按钮和表单-->
     <div class="wrap">
            <div>
                <input type="button" value="添加数据" id="j_btnAddData" class="btnAdd"/>
            </div>
            <table>
                <thead>
                <tr>
                    <th>课程名称</th>
                    <th>所属学院</th>
                    <th>已学会</th>
                </tr>
                </thead>
                <tbody id="j_tb">
                <tr>
                    <td>JavaScript</td>
                    <td>CSDN</td>
                    <td><a href="javascrip:;" class="get">delete</a></td>
                </tr>
                <tr>
                    <td>css</td>
                    <td>CSDN</td>
                    <td><a href="javascrip:;" class="get">delete</a></td>
                </tr>
                <tr>
                    <td>html</td>
                    <td>CSDN</td>
                    <td><a href="javascrip:;" class="get">delete</a></td>
                </tr>
                <tr>
                    <td>jQuery</td>
                    <td>CSDN</td>
                    <td><a href="javascrip:;" class="get">delete</a></td>
                </tr>
                </tbody>
            </table>
        </div>
        <!--遮罩层-->
        <div id="j_mask" class="mask"></div>
        <!--添加数据的表单-->
        <div id="j_formAdd" class="form-add">
            <div class="form-add-title">
                <span>添加数据</span>
    
                <div id="j_hideFormAdd">×</div>
            </div>
            <div class="form-item">
                <label class="lb" for="j_txtLesson">课程名称：</label>
                <input class="txt" type="text" id="j_txtLesson" placeholder="请输入课程名称">
            </div>
            <div class="form-item">
                <label class="lb" for="j_txtBelSch">所属学院：</label>
                <input class="txt" type="text" id="j_txtBelSch" value="CSDN">
            </div>
            <div class="form-submit">
                <input type="button" value="添加" id="j_btnAdd">
            </div>
        </div>
    
</body>
</html>
<script>
    $(function(){
        //需求１：点击添加数据按钮，显示添加面板和遮罩层
        //需求２：点击添加面板里面的关闭按钮，隐藏添加面板和遮罩层
        //需求３：点击添加按钮里的添加按钮，会把输入的内容生成一个tr,这个tr添加到tbody中
        //需求４：点击delete这些个a标签，删除对应的tr

        //需求１：
        $('#j_btnAddData').click(function(){
            $('#j_formAdd').show();
            $('#j_mask').show();
        });
        //需求２
        $('#j_hideFormAdd').click(function(){
            $('#j_formAdd').hide();
            $('#j_mask').hide();

        });
        //需求３
        $('#j_btnAdd').click(function(){
            //获取用户所输入的所属学院和课程名称
            var txtLesson = $('#j_txtLesson').val();//获取用户输入的课程名称
            var txtBelSch = $('#j_txtBelSch').val();//获取用户输入的所属学院
            //把用户输入的课程名称和所属学院生成一个tr
            var $trNew =$( '  <tr>' +
                                       ' <td>'+txtLesson+'</td>' +
                                        ' <td>'+txtBelSch+'</td>' +
                                        '<td><a href="javascrip:;" class="get">delete</a></td>'+
                                        ' </tr>');
            //给新创建的$trNew里面的a标签添加一个事件
            $trNew.find(' .get').click(function(){
                $(this).parent().parent().remove();
                //$trNew.remove();
            });
            //把新创建的tr标签添加到tbody中
            $('#j_tb').append($trNew);
            //把添加数据面板和遮罩层隐藏起来
            $('#j_hideFormAdd').click();
        });

        //需求４
        // $('#j_tb .get').click(function(){
        //     $(this).parent().parent().remove();
        // });

        //使用on委托注册的方式
        //支持动态注册的
        $('#j_tb').on('click',' .get',function(){
            //jq为了使用方便，把this给修改了
            $(this).parent().parent().remove();
        })

        //页面出现了哈哈二字说明上面的代码，包括需求４这个注册事件都已经完成了
        //说明那４个tr已经注册了事件了
        // console.log('哈哈');
    });
</script>

gxgalaxy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery-使用on委托注册实现动态数据的添加和删除

这里写自定义目录标题必会知识点效果图需求源代码必会知识点on方法注册简单事件与委托事件 1.on简单注册事件(不支持动态注册) 两个参数： (1)事件名称 (2)事件处理程序 ``` $('div').on('click',function(){ // console.log('我是单击事件'); }); ``` ...
复制链接

扫一扫

专栏目录