上一篇:前端之jQuery常用总结 点击跳转
目录篇:前端(html,css,js)目录篇 点击跳转
下一篇:web框架的本质(socket,WSGI) 点击跳转
目录
删除器(全选,取消,反选)
-
DOM实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } /*display:none;不显示该标签*/ .c1{ position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: black; opacity: 0.6; z-index: 9; /* position:fixed; 固定页面某个位置,(多层,这里第二层) left: 0;top: 0;right: 0;bottom: 0; 覆盖全背景层(第一层) background-color: black; 背景颜色:黑色 opacity: 0.6;透明度 z-index: 9; 层优先级,越大越上层 */ } .c2{ width: 500px; height: 400px; background-color: white; position: fixed; left: 50%; top: 50%; margin-left: -250px; margin-top: -200px; z-index: 10; } /* width: 500px;height: 400px; 该标签的宽度高度 position:fixed; 固定页面某个位置,(多层,这里第三层) background-color: white; 背景颜色:白色 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="ChooseAll();" /> <input type="button" value="取消" onclick="CancleAll();" /> <input type="button" value="反选" onclick="ReverseAll();" /> <!--onclick="ShowModel();"点击该添加按钮就调用的ShowModel()函数--> <table> <!--table:表--> <thead> <!--thead:表头部--> <tr> <th>选择</th> <th>主机名</th> <th>端口</th> </tr> <!--tr:行 th:列--> </thead> <tbody id="tb"> <!--tbody:表内容--> <tr> <td> <input type="checkbox" checked="true" /> <!--input type="checkbox" 多选择框 checked="true" 有该了属性等于默认勾上--> </td> <td>1.1.1.1</td> <td>190</td> </tr> <tr> <td><input type="checkbox"f id="test" /></td> <td>1.1.1.2</td> <td>192</td> </tr> <tr> <td><input type="checkbox" /></td> <td>1.1.1.3</td> <td>193</td> </tr> <!--tr:行 td:列--> </tbody> </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();"/> <!-- onclick="HideModel();"点击该添加按钮就调用的HideModel()函数--> <input type="button" value="确定"/> </p> </div> <!-- 弹出框结束 --> <script> function ShowModel(){ document.getElementById('i1').classList.remove('hide'); document.getElementById('i2').classList.remove('hide'); } /* 获取id=i1的标签并且去掉该标签的class属性的value:hide 获取id=i2的标签并且去掉该标签的class属性的value:hide */ function HideModel(){ document.getElementById('i1').classList.add('hide'); document.getElementById('i2').classList.add('hide'); } /* 获取id=i1的标签并且增加该标签的class属性的value:hide 获取id=i2的标签并且增加该标签的class属性的value:hide */ function ChooseAll(){ var tbody = document.getElementById('tb'); //获取id=tb的标签 var tr_list = tbody.children; //获取该标签的所有子标签tr for(var i=0;i<tr_list.length;i++){ //循环所有的tr标签,current_tr var current_tr = tr_list[i]; //获取所有tr的下标的元素赋值给current_tr var checkbox = current_tr.children[0].children[0]; //取出该tr下标0的元素(该tr标签的第一个子标签)的下标0的元素(tr标签的第一个子标签下的第一子标签) checkbox.checked = true; /* checkbox.checked = false;修改该标签的checked属性=true checked 是input标签checkbox多选择框的属性 checked=true;等于选择默认勾上 checked=false; 等于选择默认不勾 */ } } function CancleAll(){ var tbody = document.getElementById('tb'); //获取id=tb的标签 var tr_list = tbody.children; //获取该标签的所有子标签tr for(var i=0;i<tr_list.length;i++){ //循环所有的tr标签,current_tr var current_tr = tr_list[i]; //获取所有tr的下标的元素赋值给current_tr var checkbox = current_tr.children[0].children[0]; //取出该tr下标0的元素(该tr标签的第一个子标签)的下标0的元素(tr标签的第一个子标签下的第一子标签) checkbox.checked = false; /* checkbox.checked = false;修改该标签的checked属性=false checked 是input标签checkbox多选择框的属性 checked=true;等于选择默认勾上 checked=false; 等于选择默认不勾 */ } } function ReverseAll(){ var tbody = document.getElementById('tb'); //获取id=tb的标签 var tr_list = tbody.children; //获取该标签的所有子标签tr for