javascript 提交弹窗

时间：2018-05-13 15:03:49 阅读：203 评论：0 收藏：0 [点我收藏+]

标签：UNC round hit ever put doc 端口 ott mode

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .c1{
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: black;
            opacity: 0.6;
            z-index: 9;
        }
        
        .c2{
            width: 500px;
            height: 400px;
            background-color: white;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -250px;
            margin-top: -200px;
            z-index: 10;
        } /*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 提交弹窗

标签：UNC round hit ever put doc 端口 ott mode

原文地址：https://www.cnblogs.com/Liang-jc/p/9032092.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行