Day14 Javascript 点击添加出弹窗,取消隐藏弹窗小练习 反选,全选,取消边框
点击添加出弹窗,取消隐藏弹窗小练习
代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .hide{ display: none; } .c1{ position: fixed; left: 0; top:0; right: 0; bottom: 0; background-color: black; opacity: 0.6; } .c2{ width: 500px; height: 400px; background-color: white; position: fixed; left: 50%; top: 50%; margin-left: -250px; margin-top: -200px; z-index: 10; } </style> </head> <body style="margin: 0;"> <!--去掉周围的小边框--> <div> <input type="button" value="添加" onclick="showModel();"> <table> <thead> <tr> <th>主机名</th> <th>端口</th> </tr> <tr> <td>1.1.1.1</td> <td>192</td> </tr> <tr> <td>1.1.1.2</td> <td>190</td> </tr> </thead> <!--<tr> 标签定义 HTML 表格中的行。--> <!--<td> 标签定义 HTML 表格中的标准单元格。--> <!--<th>定义表格内的表头单元格。--> </table> </div> <!--遮罩层开始--> <div id="i1" class="c1 hide"></div> <!--遮罩层结束--> <!--弹出框开始--> <div id="i2" class="c2 hide"> <p><input type="text"></p> <p><input type="text"></p> <p> <input type="button" value="取消" onclick="HideModel();"> <input type="button" value="确定"> </p> </div> <!--弹出框结束--> <script> function showModel() { document.getElementById("i1").classList.remove('hide'); document.getElementById("i2").classList.remove('hide'); } function HideModel() { document.getElementById("i1").classList.add('hide'); document.getElementById("i2").classList.add('hide'); } </script> </body> </html>
在上面的基础上加上反选,全选,取消边框的代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .hide{ display: none; } .c1{ position: fixed; left: 0; top:0; right: 0; bottom: 0; background-color: black; opacity: 0.6; } .c2{ width: 500px; height: 400px; background-color: white; position: fixed; left: 50%; top: 50%; margin-left: -250px; margin-top: -200px; z-index: 10; } </style> </head> <body style="margin: 0;"> <!--去掉周围的小边框--> <div> <input type="button" value="添加" onclick="showModel();"> <input type="button" value="全选" onclick="quanxuan();"> <input type="button" value="取消" onclick="quxiao();"> <input type="button" value="反选" onclick="fanxuan();"> <table> <thead> <tr> <th>选择</th> <th>主机名</th> <th>端口</th> </tr> </thead> <tbody id="tb"> <tr> <td><input type="checkbox"></td> <td>1.1.1.1</td> <td>192</td> </tr> <tr> <td><input type="checkbox"></td> <td>1.1.1.2</td> <td>190</td> </tr> </tbody> <!--<tr> 标签定义 HTML 表格中的行。--> <!--<td> 标签定义 HTML 表格中的标准单元格。--> <!--<th>定义表格内的表头单元格。--> </table> </div> <!--遮罩层开始--> <div id="i1" class="c1 hide"></div> <!--遮罩层结束--> <!--弹出框开始--> <div id="i2" class="c2 hide"> <p><input type="text"></p> <p><input type="text"></p> <p> <input type="button" value="取消" onclick="HideModel();"> <input type="button" value="确定"> </p> </div> <!--弹出框结束--> <script> function showModel() { document.getElementById("i1").classList.remove('hide'); document.getElementById("i2").classList.remove('hide'); } function HideModel() { document.getElementById("i1").classList.add('hide'); document.getElementById("i2").classList.add('hide'); } function quanxuan() { var tbody = document.getElementById('tb'); var tr_list = tbody.children; //获取所有的tr标签 for (var i = 0; i < tr_list.length; i++) { //循环所有的tr var current_tr = tr_list[i]; var checkbox = current_tr.children[0].children[0]; //前面的选择框是根据checked 的值为 true 和 false来判断的 checkbox.checked = true; } } function quxiao() { var tbody = document.getElementById('tb'); var tr_list = tbody.children; //获取所有的tr标签 for (var i = 0; i < tr_list.length; i++) { //循环所有的tr var current_tr = tr_list[i]; var checkbox = current_tr.children[0].children[0]; //前面的选择框是根据checked 的值为 true 和 false来判断的 checkbox.checked = false; } } function fanxuan() { var tbody = document.getElementById('tb'); var tr_list = tbody.children; //获取所有的tr标签 for(var i=0;i<tr_list.length;i++){ //循环所有的tr var current_tr = tr_list[i]; var checkbox = current_tr.children[0].children[0] ; //前面的选择框是根据checked 的值为 true 和 false来判断的 // checkbox.checked = true; if (checkbox.checked){ checkbox.checked = false; }else { checkbox.checked = true; } } } </script> </body> </html>