<!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. 红黑树(RBTREE)之上-------构造红黑树

    该怎么说呢,现在写代码的速度还是很快的,很高兴,o(^▽^)o. 光棍节到了,早上没忍住,手贱了一般,看到*D的优惠,买了个机械键盘,晚上就到了,敲着还是很舒服的,和老婆炫耀了一把哈哈. 光棍节再去* ...

  2. 虚拟机VM安装Linux系统CentOS7

    第一步:安装一个VM虚拟机: 百度VM,使用普通下载,一路Next即可 如果需要输入序列号,可以网上随意找一个,目前是个人可以随意激活,但如果做商业用途的话,还是最好买一个序列号,我在网上搜到的:5A ...

  3. HDU 4069 数独

    好久没做题了,建图搞了好久…… 然后,判是否有多解的时候会把原来的答案覆盖掉…… 这里没注意,弄了一下午…… 代码: #include <iostream> #include <cs ...

  4. logstash-shipper.conf

    input { file { path => '/data/rsyslog/*/*/*.log' start_position => 'beginning' sincedb_path =& ...

  5. Mysql学习总结（20）——MySQL数据库优化的最佳实践

    1)谨慎而有效地使用索引 选择合理的索引(前缀性及可选性).删除没有用的索引. 2)使用规范化,但不要使用过头 规范化(至少是第三范式)是一个易于理解且标准的方法.然而,在有些情况下,你可能希望违反这 ...

  6. wipefs进程是啥，占用了百分之90多的cpu

    http://www.cnblogs.com/liuchuyu/p/7490338.html

  7. js 判断是否滚动到底部

    $(window).scroll(function(){ var scrollTop = $(this).scrollTop(); //scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置 ...

  8. URAL - 1243 - Divorce of the Seven Dwarfs （大数取模）

    1243. Divorce of the Seven Dwarfs Time limit: 1.0 second Memory limit: 64 MB After the Snow White wi ...

  9. jeesite 简介

    jeesite 简介 https://github.com/thinkgem/jeesite http://jeesite.com/

  10. android将String转化为MD5的方法+一些String经常使用的方法

    public class StringUtils { public static String MD5Encode(String origin) { String resultString = nul ...