1 按下Ctrl键，使在下表中“操作”列中选择同时使被勾选的那些行，获得同样的选择？
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>网吧管理系统</title> </head> <body> <table border="1px" > <thead> <tr> <th>#</th> <th>机号</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td><input title="勾选" type="checkbox"></td> <td>1</td> <td> <select title="操作" name="state" id="select0"> <option value="0">离线</option> <option value="1">上线</option> <option value="2">下线</option> </select> </td> </tr> <tr> <td><input title="勾选" type="checkbox"></td> <td>2</td> <td> <select title="操作" name="state" id="select1"> <option value="0">离线</option> <option value="1">上线</option> <option value="2">下线</option> </select> </td> </tr> <tr> <td><input title="勾选" type="checkbox"></td> <td>3</td> <td> <select title="操作" name="" id="select2"> <option value="0">离线</option> <option value="1">上线</option> <option value="2">下线</option> </select> </td> </tr> <tr> <td><input title="勾选" type="checkbox"></td> <td>4</td> <td> <select title="操作" name="" id="select3"> <option value="0">离线</option> <option value="1">上线</option> <option value="2">下线</option> </select> </td> </tr> <tr> <td><input title="勾选" type="checkbox"></td> <td>5</td> <td> <select title="操作" name="" id="select4"> <option value="0">离线</option> <option value="1">上线</option> <option value="2">下线</option> </select> </td> </tr> <tr> <td><input title="勾选" type="checkbox"></td> <td>5</td> <td> <select title="操作" name="" id="select5"> </select> </td> </tr> </tbody> </table> <script src="jquery-3.2.1.min.js"></script> <script> $("document").ready(function () { var keyOnctrl=false; $bodyEle= $("body"); $bodyEle.on("keydown",function (event) { if (event.keyCode === 17) { keyOnctrl = true; console.log(event.keyCode) } }); $bodyEle.on("keyup",function (event) { if (event.keyCode === 17) { keyOnctrl = false; console.log(event.keyCode) } } ) $selectEles=$("select"); $selectEles.on("change",function () { if (keyOnctrl===true){ check_val=this.value; console.log(this,check_val); $("input[type='checkbox']:checked").parentsUntil("tbody").find('select').val(check_val) } }) }) </script> </body> </html>
2 实现下图所有功能；
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>周末作业分解</title> <style> #myModal{ position: fixed; top: 20%; left: 40%; z-index: 200; border: white 1px solid; padding: 10px; display: none; } .back{ display: none; height: 100%; width: 100%; background-color: rgba(0,0,0,0.5); position: fixed; z-index: 100; } </style> </head> <body> <div class="back"></div> <table border="1"> <thead> <tr> <th>#</th> <th>姓名</th> <th>爱好</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Egon</td> <td>街舞</td> <td> <button class="edit-btn">编辑</button> <button class="delete-btn">删除</button> </td> </tr> <tr> <td>2</td> <td>Alex</td> <td>烫头</td> <td> <button class="edit-btn">编辑</button> <button class="delete-btn">删除</button> </td> </tr> <tr> <td>3</td> <td>苑局</td> <td>日天</td> <td> <button class="edit-btn">编辑</button> <button class="delete-btn">删除</button> </td> </tr> </tbody> </table> <button id="add">新增</button> <div id="myCover" class="cover hide"></div> <div id="myModal" class="modal hide"> <div> <p> <label for="modal-name">姓名</label> <input type="text" id="modal-name"> </p> <p> <label for="modal-habit">爱好</label> <input type="text" id="modal-habit"> </p> <p> <button id="modal-submit">提交</button> <button id="modal-cancel">取消</button> </p> </div> </div> <script src="jquery-3.2.1.min.js"></script> <script> //编辑初始化时的div#myModal,ok //给新增按钮安上相应功能，1单击事件---使div.back和div#myModal出现 $back=$('.back'); $myModal=$('#myModal'); $modalSubmit=$("#modal-submit"); $modalCancel=$("#modal-cancel"); $edit=$(".edit-btn"); $delete=$(".delete-btn"); $newModal_tr=$('tbody tr:first').clone(); var submitMode=0; function jumpMyMoal() { $back.css('display','inline'); $myModal.css('display','inline'); } function hideMyMoal() { $back.css('display','none'); $myModal.css('display','none'); } function clearMyModal() { $myModal.find(':text').val("") } function sortIndex() { for (var i=0;i<$('tbody tr').length;i++){ $('tbody tr')[i].children[0].innerText=i+1 } } //新增按钮的作用 $("#add").on('click',function () { jumpMyMoal(); submitMode=1 //新增模式 }); //提交按钮功能----在tbody的最后加上一行新增tr，tr内应该有正确的值 $modalSubmit.on("click",function () { if ($("#modal-name").val() && $("#modal-habit" ).val() && submitMode === 1){ $newModal_tr=$newModal_tr.clone(); $newModal_tr.children()[1].innerText=$("#modal-name").val(); $newModal_tr.children()[2].innerText=$("#modal-habit").val(); $('tbody').append($newModal_tr); sortIndex(); hideMyMoal(); clearMyModal(); submitMode =0 } else if ($("#modal-name").val() && $("#modal-habit").val() && submitMode === 2 ){ $("tr[editing] td")[1].innerText=$("#modal-name").val(); $("tr[editing] td")[2].innerText=$("#modal-habit").val(); $("tr[editing]").removeAttr("editing"); hideMyMoal(); clearMyModal(); submitMode =0 } else { alert('数据为空不能提交') } }); //取消按钮的功能 $modalCancel.on("click",function () { hideMyMoal(); clearMyModal(); submitMode=0 }); //编辑按钮的功能 $("tbody").on("click",".edit-btn",function () { jumpMyMoal(); $("#modal-name").val( $(this).parentsUntil('tr').siblings()[1].innerText); $("#modal-habit").val( $(this).parentsUntil('tr').siblings()[2].innerText); submitMode=2; //编辑模式 $(this).parent().parent().attr('editing',true) }); //删除按钮 $("tbody").on("click",".delete-btn",function (){ $(this).parent().parent().remove() sortIndex(); }) //给索引栏开启自动填写功能---没有错位的数字，有资料的每一栏有正确的数字 </script> </body> </html>
用JavaScript，写一个类似python的 in函数，
function In(a,k){for (x in k){
if (k[x]===a){
return true;
}else if( k[x]!==a && x<(k.length-1))
{continue}
else{return false
}}}
function trim(str){ //删除左右两端的空格
return str.replace(/(^s*)|(s*$)/g, "");
}
function ltrim(str){ //删除左边的空格
return str.replace(/(^s*)/g,"");
}
function rtrim(str){ //删除右边的空格
return str.replace(/(s*$)/g,"");
}