javascript 提交彈窗

最後更新：2018-05-13 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：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 提交彈窗

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More