zoukankan      html  css  js  c++  java
  • python之JQuery(批量操作,监听按键)

    监听window键盘的事件:
        (如监听shift按下)(keydown,keyCode)
        //定义全局变量,监听键盘的shift是否被按下,shift对应的码是16
        var flag=false;
        //注意是window对象,e是事件本身
        $(window).on("keydown",function (e) {
            if(e.keyCode === 16){
                falg=true;
            }
        });
        
        
    #--按住shift进行批量操作示例
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
        </head>
        <body>
        <table border="1px">
            <thead>
            <tr>
                <th>选择</th>
                <th>姓名</th>
                <th>功能</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td><input type="checkbox"></td>
                <td>林同学</td>
                <td>
                    <select>
                        <option value="1">上线</option>
                        <option value="2">下线</option>
                        <option value="3">注销</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>陈同学</td>
                <td>
                    <select>
                        <option value="1">上线</option>
                        <option value="2">下线</option>
                        <option value="3">注销</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>李同学</td>
                <td>
                    <select>
                        <option value="1">上线</option>
                        <option value="2">下线</option>
                        <option value="3">注销</option>
                    </select>
                </td>
            </tr>
            </tbody>
        </table>
        <input type="button" id="b1" value="全选">
        <input type="button" id="b2" value="取消">
        <input type="button" id="b3" value="反选">
        <script src="jquery-3.4.1.min.js"></script>
        <script>
            //全选按钮事件
            $("#b1").on("click",function () {
                $(":checkbox").prop("checked",true);
            });
            //取消按钮事件
            $("#b2").on("click",function () {
                $(":checkbox").prop("checked",false);
            });
            //反选按钮事件
            $("#b3").on("click",function () {
                //找到所有的checkbox,而this是DOM对象,注意转为JQuery对象,然后为每一个checkbox修改与其本身相反的checked的值
                $(":checkbox").each(function () {
                    console.log(this);
                    var flags=$(this).prop("checked");
                    $(this).prop("checked",!flags);
                });
            });
            //按住shift批量操作
            //定义全局变量,监听键盘的shift是否被按下,shift对应的码是16
            var flag=false;
            //监听键盘,注意是window对象,e是事件本身
            $(window).on("keydown",function (e) {
                if(e.keyCode === 16){
                    flag=true;
                }
            });
            $(window).on("keyup",function (e) {
                if(e.keyCode === 16){
                    flag=false;
                }
            });
            //select绑定change事件
            $("table select").on("change",function () {
                //根据flag的true,false判断是否批量操作,还需要判断checkbox是否被选中
                if(flag){
                    var selectValue=$(this).val();      //this为修改的select值,val获取的是option标签中的value值,而传进去这个值时,会对应的修改为这个值对应的内容
                    //找到所有checkbox被选中的那一行select,选中指定值
                    $("input:checked").parent().parent().find("select").val(selectValue);
                }
            });
    
        </script>
        </body>
        </html>
  • 相关阅读:
    自定义maven插件
    vim编辑器的基本用法
    sql查询两条记录的时间差
    spring boot继承web和mybatis时,调用接口删除记录出现的空指针以及解决办法
    Thymeleaf模板引擎的初步使用
    Spring Boot中的AutoConfiguation核心注解
    Spring Boot中的自定义start pom
    Spring中,使用Java配置的方式进行依赖注入
    设计模式之——flyweight模式
    ConfuserEx .net dll加壳失败原因
  • 原文地址:https://www.cnblogs.com/god-for-speed/p/11587261.html
Copyright © 2011-2022 走看看