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& ...
随机推荐
- NEO VM原理及其实现(转载)
NEO Vm原理及其实现 简介及与evm主要区别 neo vm和evm类似.底层都实现了一套opcode以及对应的执行器,opcode设计差距蛮大的,总体上来说evm的更加简洁,neo vm的功能更加 ...
- Ubuntu16.04阿里云源
16.04源 deb http://mirrors.aliyun.com/ubuntu/ xenial main restricted universe multiverse deb http://m ...
- 10.我们可以用2*1的小矩形横着或者竖着去覆盖更大的矩形。 请问用n个2*1的小矩形无重叠地覆盖一个2*n的大矩形，总共有多少种方法？
我们可以用2*1的小矩形横着或者竖着去覆盖更大的矩形. 请问用n个2*1的小矩形无重叠地覆盖一个2*n的大矩形,总共有多少种方法? 是不是发现看不懂,哈哈:编程题就是这样,一定要归纳,手写过程: n ...
- Django中HtttpRequest请求
1.什么是HttpRequest HttpRequest,就是对请求对象的封装,里面封装的是请求过程中的所有信息.在Django中HttpRequest被封装成request对象并封装到视图处理函数中 ...
- Build Tool（构建工具）
what: 构建工具能够帮助你创建一个可重复的.可靠的.携带的且不需要手动干预的构建.构建工具是一个可编程的工具,它能够让你以可执行和有序的任务来表达自动化需求.假设你想要编译源代码,将生成的clas ...
- s21day02 python笔记
s21day02 python笔记 一.昨日内容回顾及补充 内容回顾 补充 if条件语句嵌套 10086示例 pycharm更改解释器 python3.7解释器 python2.7解释器 二.循环语句 ...
- 对List数组进行排序 Collections.sort(param1,param2)
@SuppressWarnings("unchecked") List<PageData> group_items_list = (List<PageData&g ...
- LOJ 6277：数列分块入门 1（分块入门）
#6277. 数列分块入门 1 内存限制:256 MiB时间限制:100 ms标准输入输出 题目类型:传统评测方式:文本比较 上传者: hzwer 提交提交记录统计讨论 3 测试数据 题目描述 给出一 ...
- ZOJ 1005：Jugs（思维）
Jugs Time Limit: 2 Seconds Memory Limit: 65536 KB Special Judge In the movie "Die Har ...
- 第一次Scrum会议(10/13)【欢迎来怼】
一.小组信息 队名:欢迎来怼 小组成员 队长:田继平 成员:李圆圆,葛美义,王伟东,姜珊,邵朔,冉华 小组照片 二.开会信息 时间:2017/10/13 16:22~16:47,总计25min. 地点 ...