<!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. CSS常用样式--background

    CSS background 属性 参考:W3school- CSS background 所有浏览器都支持 background 属性,其简写形式,在一个声明中设置所有的背景属性,各属性需按顺序,语 ...

  2. redis搭建与安装2

    第一步redis安装:1.首先确认下载包为64位的还是32位的2.下载http://code.google.com/p/servicestack/downloads3.解压下载包得到以下文件:cygw ...

  3. 【BZOJ 1196】[HNOI2006]公路修建问题

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 二分最后选的边中的最大值是多少. mid 则所有边权小于等于mid的边都可以用了. 那么我们要怎么选择呢? ->优先选择一级的 ...

  4. POJ——T2553 The Bottom of a Graph

    http://poj.org/problem?id=2553 Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 10987   ...

  5. Qt之QAbstractButton

    简述 QAbstractButton类是按钮部件的抽象基类,提供了按钮所共有的功能. QAbstractButton类实现了一个抽象按钮,并且让它的子类来指定如何处理用户的动作,并指定如何绘制按钮. ...

  6. php函数in_array奇怪现象

    $k = 0; $fieldArr = array('tt', 'bb'); if ( in_array( $k, $fieldArr)) { echo '1'; } 按理来说,是不会输出1的,可是最 ...

  7. A. Ilya and Diplomas（ Codeforces Round #311 (Div. 2) ）

    A. Ilya and Diplomas time limit per test 1 second memory limit per test 256 megabytes input standard ...

  8. MinGW - 安装和配置 / MinGW - Howto Install And Configure

    MinGW在线安装程序下载地址:http://sourceforge.net/projects/mingw/files/Automated%20MinGW%20Installer/mingw-get- ...

  9. Hadoop框架基础（一）

    ** Hadoop框架基础(一)     学习一个新的东西,传统而言呢,总喜欢漫无目的的扯来扯去,比如扯扯发展史,扯扯作者是谁,而我认为这些东西对于刚开始接触,并以开发为目的学者是没有什么帮助的,反而 ...

  10. nil gogo

    https://blog.csdn.net/zhonggaorong/article/details/50233421 https://github.com/KevinHM/FunctionalRea ...