dom实例，模态框，全选，反选，取消
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.zhezhao{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: black;
opacity: 0.6;
z-index: 9;
}
.add_mod{
height:400px;
width:500px;
position: fixed;
background-color: white;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -200px;
z-index: 10;
}
</style>
</head>
<body style="margin: 0 auto;">
<input type="button" onclick="fun2()" value="添加" />
<input type="button" onclick="choise_all()" value="全选" />
<input type="button" onclick="cancel_all()" value="取消" />
<input type="button" onclick="reverse_all()" value="反选" />
<div>
<table border="1px">
<thead>
<tr>
<th>选择</th>
<th>IP</th>
<th>端口</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"/></td>
<td>1.1.1.1</td>
<td>900</td>
</tr>
<tr id="tb">
<td><input type="checkbox"/></td>
<td>1.1.1.2</td>
<td>902</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>1.1.1.3</td>
<td>903</td>
</tr>
</tbody>
</table>
</div>
<!--遮罩层-->
<div id="i1" class="zhezhao hide"></div>
<!--模块弹窗开始-->
<div id="i2" class="add_mod hide">
<input type="text" />
<input type="text" />
<input type="button" onclick="fun1()" value="取消" />
<input type="button" value="确定" />
</div>
<!--模块弹窗结束-->
<script type="application/javascript">
function fun1() {
document.getElementById('i1').classList.add('hide');
document.getElementById('i2').classList.add('hide');
}
function fun2() {
document.getElementById('i1').classList.remove('hide');
document.getElementById('i2').classList.remove('hide');
}
function choise_all() {
var tr = document.getElementById('tb');
var trlist = tr.parentElement.children;
for (var i=0;i<trlist.length;i++) {
trlist[i].children[0].children[0].checked = true;
}
}
function cancel_all() {
var tr = document.getElementById('tb');
var trlist = tr.parentElement.children;
for (var i=0;i<trlist.length;i++) {
trlist[i].children[0].children[0].checked = false;
}
}
function reverse_all() {
var tr = document.getElementById('tb');
var trlist = tr.parentElement.children;
for (var i=0;i<trlist.length;i++) {
trlist[i].children[0].children[0].checked = ! trlist[i].children[0].children[0].checked;
// 以下是if判断写法
// if (trlist[i].children[0].children[0].checked) {
// trlist[i].children[0].children[0].checked = false;
// }else {
// trlist[i].children[0].children[0].checked = true;
// }
}
}
</script>
</body>
</html>
dom实例，模态框，全选，反选，取消的更多相关文章
- python: jquery实现全选 反选 取消
引入这个jquery-1.12.4.js jquery实现全选 反选 取消 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitio ...
- js进阶 9-16 如何实现多选框全选和取消
js进阶 9-16 如何实现多选框全选和取消 一.总结 一句话总结:选择取到每一个checkbox的值,然后赋值为true或者false就好. 1.如何实现多选框全选和取消? 选择取到每一个check ...
- jQuery 前端复选框 全选 反选 下拉菜单联动
jQuery 页面中复选框全选.反选.下拉联动(级联) <!DOCTYPE html> <html lang="en"> <head> < ...
- ----Juquery复选框全选反选及获取选中值Value
--获取选中值 var pList = ""; $("[name='ckdProd']").each(function () { if ($(this).is( ...
- toFixed（）精度丢失；复选框全选、取消
一.精度丢失和重写toFixed()函数 1.重写toFixed() Number.prototype.toFixed = function(length){ var carry = 0; //存放进 ...
- jQuery实现复选框全选/所有取消/反选/获得选择的值
<!DOCTYPE html> <html> <head> <script type="text/javascript" src=&quo ...
- JQuery实现列表中复选框全选反选功能封装
我们在做列表的时候经常会遇到全选,反选进行批量处理问题,例如: 我当时就是简单的实现了,然后想封装到公共的js中,封装的太烂,不好意思贴出来了(就是把实现代码之间放到公共js中,然后每个页面都用固定的 ...
- jquery实现全选 反选 取消
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js复选框全选反选
本篇文章是关于复选框的,有2种形式:1.全选.反选由2个按钮实现:2.全选.反选由一个按钮实现. <!DOCTYPE html> <html> <head> < ...
- 使用JavaScript实现复选框全选与取消的功能
实现效果: html代码: <body> <input type="checkbox" id="checkAll"/>全选<br& ...
随机推荐
- AOP记录方法的执行时间
作用AOP监控方法的运行时间如下: @Component @Aspect public class LogAop { private Logger log = LoggerFactory.getLog ...
- 16 多校 8 Ball （贪心排序）很巧妙的思路啊~
ZZX has a sequence of boxes numbered 1,2,...,n1,2,...,n. Each box can contain at most one ball. You ...
- file类和io流
一.file类 file类是一个可以用其对象表示目录或文件的一个Java.io包中的类 import java.io.File; import java.io.IOException; public ...
- Samsung_tiny4412(驱动笔记03)----字符设备驱动基本操作及调用流程
/*********************************************************************************** * * 字符设备驱动基本操作及 ...
- MySQL篇，第一章：数据库知识1
MySQL 数据库 1 一.MySQL概述 1.什么是数据库 数据库是一个存储数据的仓库 2.哪些公司在用数据库 金融机构.购物网站.游戏网站.论坛网站... ... 3.提供 ...
- mysql设置外键约束开启-关闭
在MySQL中删除一张表或一条数据的时候,出现 [Err] 1451 -Cannot delete or update a parent row: a foreign key constraint f ...
- SQL Server导入导出表及备份恢复
1. 导出: 2. 导入
- 2017年秋软工-PSP总结报告
一.回顾1 回顾本学期第一次作业[https://edu.cnblogs.com/campus/nenu/SWE2017FALL/homework/876]. ==>本学期我的第一次作业博客[h ...
- 实验吧—Web——WP之 Forms
我们先打开解题链接: 做Web题的第一步就是查看网页源代码,当然,有些网页他不会让你点击右键,那么可以在地址栏里的地址前面加上:view-source: 当然也可以打开控制台F12 我们可以看到代码里 ...
- python------模块定义、导入、优化 ------->re模块
该部分内容引用自:http://www.cnblogs.com/alex3714/articles/5161349.html 谢谢原博主的文章,只是自己学习,无其他使用. re模块 常用正则表达式符号 ...