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& ...
随机推荐
- Python学习笔记第十六周
目录: 一.CSS补充 1.页面布局 二.JavaScript补充 1.条件判断 2.函数分类 3.序列化 4.转义 5.eval 6.时间 7.作用域 三.DOM 1.间接查找 文本操作 样式操作 ...
- Python学习笔记第八周
目录: 一.基础概念 1.动态导入模块 2.断言机制 3.SocketServer 二.作业 FTP服务器 三.单独注明 1.类中装饰器 2.进度条 一.基础概念 1.动态导入模块 有时在编程过程中, ...
- jQuery的事件
事件冒泡处理 使用event.stopPropagation();阻止事件冒泡 冒泡事件也可以使用return false来处理 并且 <script type="text/javas ...
- Ubuntu上latex+atom配置
网上流传的latex+atom大都是windows上的,Ubuntu与windows上的配置方式大同小异,这里写下自己的经验: 分为三个步骤,首先安装texlive,texlive是latex的依赖库 ...
- TFLearn 与 Tensorflow 一起使用
好用的不是一点点..=-=.. import tensorflow as tf import tflearn import tflearn.datasets.mnist as mnist # Usin ...
- [LeetCode&Python] Problem 167. Two Sum II - Input array is sorted
Given an array of integers that is already sorted in ascending order, find two numbers such that the ...
- 回文树&后缀自动机&后缀数组
KMP,扩展KMP和Manacher就不写了,感觉没多大意思. 之前感觉后缀自动机简直可以解决一切,所以不怎么写后缀数组. 马拉车主要是通过对称中心解决问题,有的时候要通过回文串的边界解决问题 ...
- 测试那些事儿—Linux搭建环境基础步骤
Linux搭建环境基础步骤 准备工具:SecureCRT工具(Linux工具,连接服务器)FTP传输工具(上传文件到服务器)MySQL连接工具 安装包(以下文件均为压缩包rpm格式和tar.gz):J ...
- 系统间通信——RPC架构设计
架构设计:系统间通信(10)——RPC的基本概念 1.概述经过了详细的信息格式.网络IO模型的讲解,并且通过JAVA RMI的讲解进行了预热.从这篇文章开始我们将进入这个系列博文的另一个重点知识体系的 ...
- 滚动加载图片（懒加载）实现原理（这是旧实现，仅做为获取元素宽高api的参考）
https://www.cnblogs.com/flyromance/p/5042187.html 本文主要通过以下几方面来说明懒加载技术的原理,个人前端小菜,有错误请多多指出 一.什么是图片滚动加载 ...