<!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. mysql 密码的破解

    现在的主流的数据库一般是mysql  ,sql  server ,  oracle. 有的时候我们忘记了数据库密码的时候我们要怎么办,破解别人的数据库的密码的时候我们要怎么搞  忘记密码是一件很头痛的 ...

  2. MySQL 数据还原

    1.1还原使用mysqldump命令备份的数据库的语法如下: mysql -u root -p [dbname] < backup.sq 示例: mysql -u root -p < C: ...

  3. Java基础学习总结（5）——多态

    一.面向对象最核心的机制--动态绑定,也叫多态 1.1.通过下面的例子理解动态绑定,即多态 package javastudy.summary; class Animal { /** * 声明一个私有 ...

  4. TOJ 3517 The longest athletic track

    3517.   The longest athletic track Time Limit: 1.0 Seconds   Memory Limit: 65536KTotal Runs: 880   A ...

  5. _stat函数/struct stat 结构体使用笔记

    内容来自互联网,非原创,方便以后查看. 另,关于获取文件信息——_stat函数的使用详见 http://blog.csdn.net/frank_liuxing/article/details/1860 ...

  6. HDOJ 题目1520 Anniversary party（树形dp）

    Anniversary party Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...

  7. JS 去除字符串中的最后一个字符

    var str = 'Hello World!'; str = str.substr(0,str.length-1); alert(str);

  8. EBS OAF开发中怎样通过ReferenceAO进行验证

    EBS OAF开发中怎样通过ReferenceAO进行验证 (版权声明.本人原创或者翻译的文章如需转载,如转载用于个人学习,请注明出处:否则请与本人联系,违者必究) Reference AO 除了用于 ...

  9. hdu 2037 贪心

    今年暑假不AC Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Su ...

  10. 介绍Oracle自带的一些ASM维护工具 （kfod/kfed/amdu）

    1.前言 ASM(Automatic Storage Management)是Oracle主推的一种面向Oracle的存储解决方式,它是一个管理卷组或者文件系统的软件.眼下已经被RAC环境广泛使用,可 ...