for循环

第一种形式
a=[11, 22, 33]
for(var item in a){
console.log(item)}
第二种形式
for( var i=0; i<a.length, i++){
console.log(i)}
举例说明
<!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;

        }
    </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="ReverseAll()"/>
        <table >
            <thead>
                <tr>
                    <th>选择</th>
                    <th>主机名</th>
                    <th>端口</th>
                </tr>
            </thead>
            <tbody id="db">
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>1.1.1.1</td>
                    <td>190</td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>1.1.1.2</td>
                    <td>192</td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>1.1.1.3</td>
                    <td>193</td>
                </tr>


            </tbody>
        </table>
    </div>
    <!--遮罩层开始-->
    <div id= 'i1' class="c1 hide"></div>
    <!--遮罩层结束-->

    <div id='i2' class="c2 hide" >
        <div style="position: fixed; top:50%; left: 50%; margin-top: -50px; margin-left: -40px">
          <p><input type="text" /></p>
          <p><input type="text" /></p>

          <p>
            <input type="button" value="取消" onclick="unShowModel()">
            <input type="button" value="确定" onclick="unShowModel()">
          </p>
        </div>
    </div>
    <script>
        function ShowModel(){
            document.getElementById('i1').classList.remove('hide')
            document.getElementById('i2').classList.remove('hide')

        }
    </script>
    <script>
        function unShowModel(){
            document.getElementById('i1').classList.add('hide')
            document.getElementById('i2').classList.add('hide')
        }
        function ChooseAll() {
            var body = document.getElementById('db');
            var tr_list = body.children;
            for (var i = 0; i < tr_list.length; i++) {
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
                checkbox.checked = true;
            }
        }
        function CancleAll() {
            var body = document.getElementById('db');
            var tr_list = body.children;
            for (var i = 0; i < tr_list.length; i++) {
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
                checkbox.checked = false;
            }
        }
        function ReverseAll() {
            var body = document.getElementById('db');
            var tr_list = body.children;
            for (var i = 0; i < tr_list.length; i++) {
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
                if(checkbox.checked===false){
                    checkbox.checked = true;
                }
                else {
                    checkbox.checked = false;
                }
                }


            }


    </script>






</body>
</html>
posted on 2018-07-10 21:42 python我的最爱阅读(198) 评论(0) 编辑收藏举报