<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .hide{

            display: none;

        }

        .c1{

            position: fixed;

            left: ;

            top: ;

            right: ;

            bottom: ;

            background-color: black;

            opacity: 0.6;

            z-index: ;

        }

        .c2{

            width: 500px;

            height: 400px;

            background-color: white;

            position: fixed;

            left: %;

            top: %;

            margin-left: -250px;

            margin-top: -200px;

            z-index: ;

        } /*k

    </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="Reverse()">

        <table>

            <thead>

                <tr>

                    <th>选择</th>

                    <th>主机名</th>

                    <th>端口</th>

                </tr>

            </thead>

            <tbody id="tb">

                <tr>

                    <td>

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

                    <td>1.1.1.2</td>

                    <td>190</td>

                </tr>

                <tr>

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

                    <td>1.1.1.3</td>

                    <td>192</td>

                </tr>

                <tr>

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

                    <td>1.1.1.4</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="确定">

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

        </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

                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

                    checkbox.checked = false

                }

            }

            function Reverse() {

                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

                    if(checkbox.checked){

                        checkbox.checked=false;

                    }else{

                        checkbox.checked=true;

                    }

                }

            }

    </script>

</body>

</html>

javascript 提交弹窗的更多相关文章

  1. JavaScript实现弹窗报错

    JavaScript实现弹窗报错 1.具体错误如下 SCRIPT 5022:cannot call methods on dialog prior to initialization; attempt ...

  2. Javascript - ExtJs - 弹窗

    1.确认对话框 Ext.MessageBox.alert( title,content,fn) Ext.onReady(function () {    Ext.Msg.alert("好吧, ...

  3. Javascript提交表单

    <form action="login.do?act=login" method="post"> <input type="subm ...

  4. 用JavaScript写弹窗

    每个弹窗的标识var x =0; var idzt = new Array(); var Window = function(config){ ID不重复 idzt[x] = "zhuti& ...

  5. 前台技术--通过javaScript提交表单

    window.location=pp+"?username="+getCookie("username")+"&userid="+g ...

  6. 关于javascript提交到java后台空格去不掉ASCII为160的解决办法

    今天正则表达式匹配一个字符串,怎么都不对. 用正则表达式去掉尝试str.replaceAll("\\s*","");  在或者用replaceAll(" ...

  7. JavaScript表单提交四种方式

    总结JavaScript表单提交四种方式 <!DOCTYPE html> <html> <head> <title>JavaScript表单提交四种方式 ...

  8. javascript form提交 不执行onsubmit事件解决方案

    转载自:https://www.cnblogs.com/lorgine/archive/2011/03/30/2000284.html 今天做项目过程中,需要用到javascript提交form到后台 ...

  9. 浅谈Supermap iClient for JavaScript 弹窗类

    地图作为信息的载体和呈现方式,是GIS的重要组成部分,它是一个浏览信息的窗口,在信息日益发达的今天 ,各种地图应用如雨后春笋一般出现在大众眼前,而不是像以往一样太过局限于专业的领域.而弹窗,是作为地图 ...

随机推荐

  1. fileOP

    public void getFileDir(String filePath) { try{ this.tv.setText("当前路径:"+filePath);// 设置当前所在 ...

  2. [React] Optimistic UI update in React using setState()

    In this lesson we will refactor an existing UI update from a typical loading approach to an optimist ...

  3. poj2280--Amphiphilic Carbon Molecules（扫描线+极角排序+转换坐标）

    题目链接:id=2280">点击打开链接 题目大意:给出n个点的坐标.每一个点有一个值0或者1,如今有一个隔板(无限长)去分开着n个点,一側统计0的个数,一側统计1的个数,假设点在板上 ...

  4. C++ 何时使用动态分配（即使用newkeyword）？何时使用指针？

    动态分配 在你的问题里.你用了两种方式创建对象.这两种方式基本的不同在于对象的存储时间. 当运行Object myObject;这句代码时.它作为自己主动变量被创建,这意味着当对象出了作用域时也会自己 ...

  5. 部署zookeeper实践

    1.解压zookeeper 2.环境变量设置 hadoop@namenode:~/zookeeper-3.4.6/conf$ sudo vim /etc/profile export JAVA_HOM ...

  6. [BZOJ4289] [PA2012] Tax 解题报告 (最短路+差分建图)

    题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=4289 4289: PA2012 Tax Time Limit: 10 Sec  Memo ...

  7. Lamp安装 php-v5.6【ZendGuardLoader】的问题

    Lamp安装 php-v5.6[ZendGuardLoader]的问题 标签(空格分隔):php,linux Apache日志: 就这个问题导致无法解析运行php文件.下面是网上找的解决方案 Zend ...

  8. if语句练习

    输入年月日,首先判断该年是平年闰年并且计算该天是该年的第几天: 判断男女体重是否标准: 体重判断里边出现一个问题:如果性别输入的不是男也不是女,那么会执行输出“请输入正确的性别”:然后底下会继续输出“ ...

  9. 虚拟机下安装mysql

    虚拟机下CentOS6.8下安装MYSQL5.6 方法: 整理修改于 http://www.cnblogs.com/liuyi2614/p/6382183.html 开始时: 普通用户是$ root用 ...

  10. ACM训练联盟周赛(第一场）

    B:Zeratul与Xor 题目描述 Xor(按位异或),对应C++中的“^”运算符. Zeratul给出了一个数列A[n](n≤105),要做q(q≤105)组动作,这些动作包括: 1  a:数列中 ...