<!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. react-native 编译报错： undefined is not an object (evaluating '_react2.PropTypes.func')

    情况通报: 因为是我的二维码模块报错,提示报错代码如下 重要信息是下面的红色字体部分(Android 模拟器红屏) undefined is not an object (evaluating '_r ...

  2. python基础6（函数 Ⅰ）

    函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段 定义 def function_name(args...): function_body #例子 def print_somethin ...

  3. mayan 游戏 search

    纯搜索,,,模拟,,还不算太难,,就是细节略繁琐 首先因为题目要求保证字典序,所以显然把右边的块换到左边不如把左边的块换到右边优, 所以可以进行不小规模的剪枝,之后显然交换两块相同的色块没有意义,至此 ...

  4. Step by Step Do IOS Swift CoreData Simple Demo

    简单介绍 这篇文章记录了在 IOS 中使用 Swift 操作 CoreData 的一些基础性内容,因为缺乏文档,基本上都是自行实验的结果.错漏不可避免,还请谅解. 部分内容借鉴了 Tim Roadle ...

  5. PAT(B) 101-111-1-2014-03-01

    1.个位数统计: #include<stdio.h> #include<iostream> #include<string.h> #include<set&g ...

  6. thinkphp5项目--个人博客（六）

    thinkphp5项目--个人博客(六) 项目地址 fry404006308/personalBlog: personalBloghttps://github.com/fry404006308/per ...

  7. 14.mocha+should.js

    转自http://www.ruanyifeng.com/blog/2015/12/a-mocha-tutorial-of-examples.html 众所周知对于任何一个项目来说,做好单元测试都是必不 ...

  8. The python programing language

    Python is an example of high-level language. As you might infer from the name “high-level language”, ...

  9. SQL SERVER中求上月、本月和下月的第一天和最后一天

    1.上月的第一天 SELECT CONVERT(CHAR(10),DATEADD(month,-1,DATEADD(dd,-DAY(GETDATE())+1,GETDATE())),111) 2.上月 ...

  10. Webkit 的麻烦和解决

    * placeholder 在 focus 状态下内容为空时,依然显示文字.和 IE11,Firefox 均不一致: input:focus::-webkit-input-placeholder { ...