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& ...
随机推荐
- 2017ICPC北京赛区网络赛 Visiting Peking University（简单思维）
描述 Ming is going to travel for n days and the date of these days can be represented by n integers: 0 ...
- POJ 3461 Oulipo（KMP裸题）
Description The French author Georges Perec (1936–1982) once wrote a book, La disparition, without t ...
- Vue 之 element-ui upload组件的文件类型
在使用element-ui的upload上传组件的时候,有时候会遇到 控制上传文件类型 的需求,只需要配置accept属性为允许的类型即可,比如: <el-upload class=" ...
- thinkphp5.0自定义验证器
虽然我早就会些php基础语法,我套过数据,自己写的控制器层,不是用的api方式,那个公司是为了锻炼我,所以才那样做的,基本上的东西都是用的框架自带的,重来自己没有去封装过这些东西,所以编程思想上,还很 ...
- Mac 终端添加代码到SVN
从SVN拉取代码步骤: 1.cd /Users/mark/zkh/Work/BC/(本地路径) 2.svn checkout https://192.168.2.99/svn/bc_android ...
- 【opencv基础】OpenCV installation stuck at [ 98%] Built target opencv_perf_stitching with no error
前言 按照官网步骤安装opencv的过程中进行到98%时一直没有继续进行. 原因 后台一直在编译运行,只需等待即可,参考here: well, turns out it gets stuck for ...
- 为什么说Java中只有值传递？
一.为什么说Java中只有值传递? 对于java中的参数传递方式中是否有引用传递这个话题,很多的人都认为Java中有引用传递,但是我个人的看法是,Java中只有值传递,没有引用传递. 那么关于对象的传 ...
- Python之路，第十六篇：Python入门与基础16
python3 bytes 和 bytearrary bytes 二进制文件的读写: 什么是二进制文件读: 文件中以字节(byte)为单位存储,不以换行符(\n)为单位分隔内容的文件: f = o ...
- react状态提升问题：：：：
父组件传值给子组件,只需要在组件上写上naverightstates={this.state.naverightstates},然后在子组件里面引用this.props.naverightstates ...
- ZOJ4067 Books（贪心）
题目链接:传送门 题目大意: DG在书店买书,从左到右第i本书价格为ai.DG从左走到右,能买就买.如果已知DG买了m本书,问他原本最多有多少钱.若无上限,输出“Richman”,若不可能买这么多书, ...