zoukankan      html  css  js  c++  java
  • 总结5.12js代表练习题

    <body>
        <table border="1px">
            <tr>
                <td>年级</td>
                <td>性别</td>
                <td>姓名</td>
                <td>操作</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td><button class="a">删除</button></td>
            </tr>
            <tr>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td><button class="a">删除</button></td>
            </tr>
            <tr>
                <td>7</td>
                <td>8</td>
                <td>9</td>
                <td><button class="a">删除</button></td>
            </tr>
        </table>
        <button class="b">添加</button>
    </body>
    <script src="../week four/jquery-3.4.1.js"></script>
    <script>
        $('body').on('click','.b',function(){
            $('table').append('<tr><td>1</td><td>2</td><td>3</td><td><button class="a">删除</button></td></tr>')
        });//点击添加按钮的动态事件,在table内部尾端添加新的tr
        $('body').on('click','.a',function(){
            $(this).parents('tr').remove();
        });//点击删除按钮的动态事件,删除掉此条tr
        $('body').on('click','td',function() {
            var text = $(this).text();
            $(this).html('<input type="text">');
            $(this).children().val(text);
        });//点击td框的动态事件,创建文本框来输入内容
        $('body').on('click','input',function(){
            return false;
        });//阻止默认行为(如链接),防止冒泡
        $('body').on('blur','input',function(){
            var val = $(this).val();
            $(this).parent().text(val);
        });//鼠标移开编辑的文本框后,将文本框的内容传递给父级元素,即td

    </script>
  • 相关阅读:
    Javascript
    Linux折腾
    arch linux 教程
    fedora 安装 网易云音乐
    angularJS
    vim以超级用户权限保存文件
    Laravel 安装
    nginx
    xargs 简单功能
    yum 安装 php5.6 和 mysql5.6
  • 原文地址:https://www.cnblogs.com/HighKK/p/12879166.html
Copyright © 2011-2022 走看看