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& ...
随机推荐
- 1.Windows下使用VisualSVN Server搭建SVN服务器
使用 VisualSVN Server来实现主要的 SVN功能则要比使用原始的 SVN和Apache相配合来实现源代码的 SVN管理简单的多,下面就看看详细的说明. VisualSVN Server的 ...
- Jsoup的学习
一 . 什么是jsoup jsoup 是一款Java 的HTML解析器,可直接解析某个URL地址.HTML文本内容.它提供了一套非常省力的API,可通过DOM,CSS以及类似于jQuery的操作方法来 ...
- [转] 理解 LSTM 网络
[译] 理解 LSTM 网络 http://www.jianshu.com/p/9dc9f41f0b29 Recurrent Neural Networks 人类并不是每时每刻都从一片空白的大脑开始他 ...
- elk的安装部署
Elk日志安装文档 需要用到有三个软件包 和redis 分布式部署:已上图就是分布式部署的架构图 Logstash : 是部署在前台的应用上,收集数据的 和部署在redis和elasticsea ...
- C#动态创建Xml-LinQ方式
C#创建Xml-LinQ方式 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- 心分享 ...
- java-接口的概述及其特点
1.接口概述: - 从狭义的角度讲就是指java中的interface - 从广义的角度讲对外提供规则的都是接口 2.接口特点: - 接口中定义的全都是抽象方法. - 接口用关键字interface表 ...
- UE4 IOS 开发之传感器输入
Iphone的传感器包括陀螺仪.加速计等. UE4提供了4个按键来收集这些传感器的3维数据.具体位置:ProjectSettings->Input. 其中Tilt数据可以反映Iphone目前的物 ...
- 《DSP using MATLAB》Problem 6.6
代码: %% ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ %% Output In ...
- 【mybatis源码学习】mybtias基础组件-反射工具
一.JavaBean的规范 类中定义的成员变量也称为字段,属性则是通过getter/setter方法得到的,属性只与类中的方法有关,与是否存在对应成员变量没有关系. 属性的getter/setter方 ...
- 【TCP/IP】二、协议的概念
一.概念 1.tcp/ip是通信协议的统称. 2.协议就是计算机与计算机之间通过网络实现通信时,事先达成的一种约定.这种约定,使那些不同厂商的设备,不同的CPU以及不同的操作系统组成的计算机之间,只要 ...