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& ...

随机推荐

calc() --- css3
http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html
ES6 class的基本语法－学习笔记
1.基本上,ES6 的class可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class写法只是让对象原型的写法更加清晰.更像面向对象编程的语法而已. 类的内部所有定义的方法,都是 ...
您应该将报表从Excel转换为Power BI的8个原因
传统上,Microsoft Excel是企业的首选报告工具,但Power BI为企业提供了强大的分析和报告功能.通过快速实验可视化,广泛数据集的统计功能和计算,以及快速重组字段动态获得答案的能力,很明 ...
20165228 2017-2018-2 《Java程序设计》第9周学习总结
20165228 2017-2018-2 <Java程序设计>第9周学习总结教材学习内容总结 URL类是java.net包中的一个重要的类,URL的实例封装着一个统一资源定位符(Unif ...
Java中的面向对象II
既然要创建一个对象那么就需要有一个类,下面介绍类的构建. 一.类的两个元素: 1.字段字段也就是类变量,每一个类变量都是类的成员. <1.>类变量访问指定通常是私有的(private)或 ...
（8）视图层参数request详解
PS:浏览器页面请求的都是get请求 PS:post请求是通过form表单,阿贾克斯发 request里面的常用方法 def index(request): print(request.META) # ...
nginx实现集群高可用
大家知道NGINX作为反向代理服务器可以实现负载均衡,同时也可以作为静态文件服务器,它的特点就是并发支持大,单机可同时支持3万并发,现在很多网站都把NGINX作为网关入口来统一调度分配后端资源.但是如 ...
nginx-port-Permission-denied
nginx use 9000 port Permission denied other port ok 新架构下web服务需要使用反向代理,将不同的请求转发到不同的service,对应不同的端口. ...
Python——scapy模块实现tcp探测目标服务器路由轨迹
scapy模块的安装 484 yum install tcpdump graphviz ImageMagick -y 485 wget http://www.secdev.org/projects ...
这样学习C语言最有效(高级技巧)——共勉
第一章学习C语言的起跑线 1.1 C语言已死? 本资料描述的是使用C语言的高级技巧,力求将你的C语言能力由"基础"提升为"高级".但是学习态度胜过学习方法,在 ...

dom实例，模态框，全选，反选，取消

dom实例，模态框，全选，反选，取消的更多相关文章

随机推荐

热门专题