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>
  • 相关阅读:
    javascript如何实现图片隐藏?
    TypeScript数字分隔符和更严格的类属性检查
    JS 原生闭包模块化开发总结
    详解浏览器储存
    对象扩展运算符和 rest 运算符及 keyof 和查找类型
    Js实现动态轮播图效果
    javascript选择器有哪些?
    javascript的事件流模型都有什么?
    理解JavaScript中的语法和代码结构
    14. Cantor表
  • 原文地址:https://www.cnblogs.com/god-for-speed/p/11587261.html
Copyright © 2011-2022 走看看