JS及Dom练习 | 模态对话框及复选框操作

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Dom复选框操作</title>

    <style>

        .hide{

            display: none;

        }

        .c1{

            position: fixed;

            left: 0;

            top: 0;

            right: 0;

            bottom: 0;

            background-color: black;

            opacity: 0.6;

            z-index: 9;

        }

        .c2{

            width: 500px;

            height: 400px;

            background-color: white;

            position: fixed;

            left: 50%;

            top: 50%;

            margin-left: -250px;

            margin-top: -200px;

            z-index: 10;

        }

    </style>

</head>

<body style="margin: 0;">

    <div>

        <input type="button" value="添加" onclick="ShowModel();" />

        <input type="button" value="全选" onclick="ChooseAll();" />

        <input type="button" value="取消" onclick="CancleAll();" />

        <input type="button" value="反选" onclick="ReverseAll();" />

        <table>

            <thead>

                <tr>

                    <th>选择</th>

                    <th>主机名</th>

                    <th>端口</th>

                </tr>

            </thead>

            <tbody id="tb">

                <tr>

                    <td>

                        <input type="checkbox" />

                    </td>

                    <td>1.1.1.1</td>

                    <td>190</td>

                </tr>

                <tr>

                    <td><input type="checkbox"f id="test" /></td>

                    <td>1.1.1.2</td>

                    <td>192</td>

                </tr>

                <tr>

                    <td><input type="checkbox" /></td>

                    <td>1.1.1.3</td>

                    <td>193</td>

                </tr>

            </tbody>

        </table>

    </div>

    <!-- 遮罩层开始 -->

    <div id="i1" class="c1 hide"></div>

    <!-- 遮罩层结束 -->

    <!-- 弹出框开始 -->

    <div id="i2" class="c2 hide">

        <p><input type="text" /></p>

        <p><input type="text" /></p>

        <p>

            <input type="button" value="取消" onclick="HideModel();"/>

            <input type="button" value="确定"/>

        </p>

    </div>

    <!-- 弹出框结束 -->

    <script>

        function ShowModel(){

            document.getElementById('i1').classList.remove('hide');

            document.getElementById('i2').classList.remove('hide');

        }

        function HideModel(){

            document.getElementById('i1').classList.add('hide');

            document.getElementById('i2').classList.add('hide');

        }

        function ChooseAll(){

            var tbody = document.getElementById('tb');

            // 获取所有的tr

            var tr_list = tbody.children;

            for(var i=0;i<tr_list.length;i++){

                // 循环所有的tr，current_tr

                var current_tr = tr_list[i];

                var checkbox = current_tr.children[0].children[0];

                checkbox.checked = true;

            }

        }

        function CancleAll(){

            var tbody = document.getElementById('tb');

            // 获取所有的tr

            var tr_list = tbody.children;

            for(var i=0;i<tr_list.length;i++){

                // 循环所有的tr，current_tr

                var current_tr = tr_list[i];

                var checkbox = current_tr.children[0].children[0];

                checkbox.checked = false;

            }

        }

        function ReverseAll(){

            var tbody = document.getElementById('tb');

            // 获取所有的tr

            var tr_list = tbody.children;

            for(var i=0;i<tr_list.length;i++){

                // 循环所有的tr，current_tr

                var current_tr = tr_list[i];

                var checkbox = current_tr.children[0].children[0];

                if(checkbox.checked){checkbox.checked = false;}else{checkbox.checked = true;}}}

    </script>

</body>

</html>

JS及Dom练习 | 模态对话框及复选框操作的更多相关文章

python之tkinter使用-复选框操作
# tkinter复选框操作 import tkinter as tk root = tk.Tk() root.title('问卷调查') root.geometry('220x80') # 设置窗口 ...
C#：复选框操作类
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.W ...
006.MFC_对话框_复选框_单选钮
对话框和控件复选框单选框分组框示例:三原色画图一.建立名为Demo2的MFC工程,按照下图添加控件并修改2个Group Box Caption属性分别为颜色.外观修改3个Check Box Ca ...
seleniumu 3.0复选框操作(定位一组元素）
一般验证复选框是否可以选择点击常用到定位一组元素去循环遍历执行点击事件.但是有时候在不同的浏览器下可能会存在差异化的最终结果. 目前谷歌浏览器常常存在多次点击同一复选框,导致最终最后两项复选框均未被勾 ...
【jQuery】对于复选框操作的attr与prop
这个是在jQuery1.6版本号之后出现的鬼东西.受影响的主要有下拉列表select与复选框checkbox.众所周知.在jQuery中能够用attr()取出节点的属性,然而对于checkbox却不是 ...
jQuery——复选框操作
学习jQuer对表单.表格操作的过程中,按照书上的例子发现一个问题: <!DOCTYPE html> <html> <head> <title>复选框应 ...
DataGridView 复选框操作大全
DataGridViewCheckBoxColumn dtCheck = new DataGridViewCheckBoxColumn(); dtCheck.DataPropertyName = &q ...
python selenium单/复选框操作
一.单选:radio 1.首先是定位选择框的位置 2.定位id,点击图标就可以了,代码如下(获取url地址方法:把上面源码粘贴到文本保存为.html后缀后用浏览器打开,在浏览器url地址栏复制出地址就 ...
[asp.net] 通过JS实现对treeview控件的复选框单选控制。
前端JS代码: //识别不同的浏览器 function getTargetElement(evt) { var elem if (evt.target) { elem = (evt.target.no ...

随机推荐

POJ - 2109 Power of Cryptography(高精度log+二分)
Current work in cryptography involves (among other things) large prime numbers and computing powers ...
WndProc
主要用在拦截并处理系统消息和自定义消息. form窗体的一个重载方法. protected override void WndProc(ref Message m) { //拦截窗体最小化按钮消息 i ...
[转]Programmatically Register Assemblies in C#.
1. Introduction. 1.1 After publishing Programmatically Register COM Dlls in C# back in 2011, I recei ...
string类------新标准c++程序设计
定义: string类是STL中basic_string模板实例化得到的模板类.其定义如下: typedef basic_string<char>string; 构造函数: string类 ...
内联函数背景、例子、与普通函数的区别及要注意的地方 ------新标准c++程序设计
背景: 使用函数能够避免将相同代码重些多次的烦恼,还能减少可执行程序的体积,但也会带来程序运行时间上的开销.函数调用在执行时,首先在栈中为形参和局部变量分配存储空间,然后还要将实参的值复制给形参,接下 ...
GitHub+Hexo 搭建个人网站详细教程
原文链接 GitHub+Hexo 搭建个人网站详细教程前言: 随着互联网浪潮的翻腾,国内外涌现出越来越多优秀的社交网站让用户分享信息更加便捷.然后,如果你是一个不甘寂寞的程序猿(媛),是否也想要搭建 ...
PHP选项和运行
PHP运行模式五大运行模式 1.cgi 通用网关接口 2.fast-cgi cgi升级 3.cli (Command Line Interface) 4.isapi 微软提供的面向Internet服 ...
P4854 MloVtry的咸鱼树状压+最短路
$ \color{#0066ff}{ 题目描述 }$ 俗话说种瓜得瓜,种豆得豆,MloVtry把自己砍掉一半埋进了土里,于是它得到了一颗n个点的咸鱼树. 但是问题是由于MloVtry只舍得埋下一半的自 ...
【离散数学】 SDUT OJ 集合的包含
集合的包含 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Problem Description 已知含n个元素的集合的子集 ...
网页footer背景(stick footer布局)
今天遇到了一个有意思的问题,想在网站的foot里面加入一张背景图片,并且在footer的底部写下一些内容于是乎在footer添加了background,并设置了footer的大小先说一下开始的做法: ...

JS及Dom练习 | 模态对话框及复选框操作

JS及Dom练习 | 模态对话框及复选框操作的更多相关文章

随机推荐

热门专题