当前位置 : 主页 > 网页制作 > html >

按键批量操作示例

来源:互联网 收集:自由互联 发布时间:2021-06-12
!DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" titlejianpan/title/headbodytable border="2" thead thoption/th thname/th thhobby/th thoperation/th /thead tbody tr tdinput type="checkbox"/td td1/td td1/td tdselect option value="1"online/
<!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>
网友评论