表格示例(取消,全选,反选):
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格示例</title> </head> <body> <button class="select">全选</button> <button class="reserve">反选</button> <button class="cancel">取消</button> <table border="1"> <tr> <td><input type="checkbox" class="check"></td> <td>111</td> <td>222</td> <td>333</td> </tr> <tr> <td><input type="checkbox" class="check"></td> <td>111</td> <td>222</td> <td>333</td> </tr> <tr> <td><input type="checkbox" class="check"></td> <td>111</td> <td>222</td> <td>333</td> </tr> <tr> <td><input type="checkbox" class="check"></td> <td>111</td> <td>222</td> <td>333</td> </tr> </table> <script> // 方式一:分别给每个button增加事件 // var ele_select = document.getElementsByClassName('select')[0]; // var ele_reserve = document.getElementsByClassName('reserve')[0]; // var ele_cancel = document.getElementsByClassName('cancel')[0]; // var ele_input = document.getElementsByClassName('check'); //全选 // ele_select.onclick = function () { // for (var i = 0; i < ele_input.length; i++) { // ele_input[i].checked = 'checked' // } // }; // //取消 // ele_cancel.onclick = function () { // for (var i =0;i<ele_input.length;i++){ // //删除checked属性,直接设置为空就行了 // ele_input[i].checked = '' // } // }; // //反选 // ele_reserve.onclick = function () { // for (var i = 0; i < ele_input.length; i++) { // var ele = ele_input[i]; // if (ele.checked) {//如果选中了就设置checked为空 // ele.checked = ''; // } // else {//如果没有就设置checked = checked // ele.checked = 'checked'; // } // } // }; //方式二:方式一的优化循环增加事件 var ele_button = document.getElementsByTagName('button'); var ele_input = document.getElementsByClassName('check'); for(var i=0;i<ele_button.length;i++) { ele_button[i].onclick = function () { if (this.innerHTML == '全选') { for (var i = 0; i < ele_input.length; i++) { //添加一个checked属性 ele_input[i].checked = 'checked' } } else if (this.innerHTML == '取消') { for (var i = 0; i < ele_input.length; i++) { //删除checked属性,直接设置为空就行了 ele_input[i].checked = '' } } else { for (var i = 0; i < ele_input.length; i++) { var ele = ele_input[i]; if (ele.checked) {//如果选中了就设置checked为空 ele.checked = ''; } else {//如果没有就设置checked = checked ele.checked = 'checked'; } } } } } </script> </body> </html>
模态对话框:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .back{ background-color: white; height: 2000px; } .shade{ position: fixed; top: 0; bottom: 0; left:0; right: 0; background-color: grey; opacity: 0.4; } .hide{ display: none; } .models{ position: fixed; top: 50%; left: 50%; margin-left: -100px; margin-top: -100px; height: 200px; width: 200px; background-color: wheat; } </style> </head> <body> <div class="back"> <input class="c" type="button" value="click"> </div> <div class="shade hide handles"></div> <div class="models hide handles"> <input class="c" type="button" value="cancel"> </div> <script> var eles=document.getElementsByClassName("c"); var handles=document.getElementsByClassName("handles"); for(var i=0;i<eles.length;i++){ eles[i].onclick=function(){ if(this.value=="click"){ for(var j=0;j<handles.length;j++){ handles[j].classList.remove("hide"); } } else { for(var j=0;j<handles.length;j++){ handles[j].classList.add("hide"); } } } } </script> </body> </html> 模态对话框