zoukankan      html  css  js  c++  java
  • 按键批量操作示例

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>jianpan</title>
    </head>
    <body>
    <table border="2">
    <thead>
    <th>option</th>
    <th>name</th>
    <th>hobby</th>
    <th>operation</th>
    </thead>
    <tbody>
    <tr>
    <td><input type="checkbox"></td>
    <td>1</td>
    <td>1</td>
    <td><select>
    <option value="1">online</option>
    <option value="2">offline</option>
    <option value="3">shutdown</option>
    </select></td>
    </tr>
    <tr>
    <td><input type="checkbox"></td>
    <td>1</td>
    <td>1</td>
    <td><select>
    <option value="1">online</option>
    <option value="2">offline</option>
    <option value="3">shutdown</option>
    </select></td>
    </tr>
    <tr>
    <td><input type="checkbox"></td>
    <td>1</td>
    <td>1</td>
    <td><select>
    <option value="1">online</option>
    <option value="2">offline</option>
    <option value="3">shutdown</option>
    </select>
    </td>
    </tr>
    <tr>
    <td><input type="checkbox"></td>
    <td>1</td>
    <td>1</td>
    <td><select>
    <option value="1">online</option>
    <option value="2">offline</option>
    <option value="3">shutdown</option>
    </select></td>
    </tr>
    <tr>
    <td><input type="checkbox"></td>
    <td>1</td>
    <td>1</td>
    <td><select>
    <option value="1">online</option>
    <option value="2">offline</option>
    <option value="3">shutdown</option>
    </select></td>
    </tr>
    </tbody>
    </table>
    <script src="jquery-3.4.1.js"></script>
    <script>
    var mode = false;
    //先判断要求1按键是否按下
    var $bodyEle = $('body');
    $bodyEle.on('keydown',function (event) {
    if(event.keyCode===17){
    mode = true;
    //进入批量操作模式
    }
    });

    $bodyEle.on('keyup',function (event) {
    if(event.keyCode===17){
    mode = false;
    }
    });

    $('select').on('change',function () {
    //先获取当前SELECT的值
    var value = $(this).val();
    //找到CHECKBOX标签
    var $thischenckbox = $(this).parent().siblings().first().find(':checkbox');
    //判断checkbox是否被选中
    if($thischenckbox.prop('checked') && mode){
    //满足checkbox被选中与按键基本要求
    //正式进入批量操作模式
    var $checked = $("input[type='checkbox']:checked");
    for(var i=0;i<$checked.length;i++){
    $($checked[i]).parent().siblings().last().find("select").val(value);
    }
    }
    })
    </script>
    </body>
    </html>
  • 相关阅读:
    【硬件】组装一台多核电脑
    【硬件】组装电脑前的准备工作
    【长知识】设计多核电脑装机方案
    【长知识】认识电脑的硬件组成
    程序员必备基础:如何安全传输存储用户密码?
    二本应届生的大学生活、2020年总结(已上岸百度)
    白日梦的Elasticsearch系列笔记(一)基础篇-- 快手上手ES
    全网最牛X的!!! MySQL两阶段提交串讲
    删库后!除了跑路还能干什么?
    数据库面试简答、30道高频面试题
  • 原文地址:https://www.cnblogs.com/njuwyx/p/11656442.html
Copyright © 2011-2022 走看看