JavaScript简易模态框2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
<style>
.c1{
    position : fixed;
    background:#777;
    right:0px;
    left:0px;
    top:0px;
    bottom:0px;
    /* height:100%;
    width:100%; */
    z-index: 2;
}
.c2{
    position: fixed;
    height:300px;
    width:500px;
    left:50%;
    top:50%;
    background-color:white;
    margin-left:-250px;
    margin-top: -150px;
    z-index:3;
}
.hide{
    display: none;
}
</style>
</head>

<body>
    <p><input type="button" value = "添加" onclick="clickmode();">
        <input type="button" value = "全选" onclick="chooseall();">
        <input type="button" value = "取消" onclick="cancelall();">
        <input type="button" value = "反选" onclick="reserveall();">
    </p>
    <table>
        <thead>
            <tr>
                <td>选择</td>
                <td>主机名</td>
                <td>端口</td>
            </tr>
        </thead>
        <tbody id = "tb">
            <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.1</td>
                <td>190</td>
            </tr>
            <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.1</td>
                <td>190</td>
            </tr>
            <tr>
                <td><input type ="checkbox"></td>
                <td>1.1.1.1</td>
                <td>190</td>
            </tr>
        </tbody>
    </table>
    <div id = "i1" class = "c1 hide"></div>
    <div id = "i2" class = "c2 hide">
       <p> <input type = "text"></p>
       <p> <input type = "text"></p>
        <input type = "button" value = "取消" onclick="nonemode()">
        <input type = "button" value = "确定">
    </div>
    <script>
    function clickmode(){
        document.getElementById("i1").classList.remove("hide");
        document.getElementById("i2").classList.remove("hide");
    }
    function nonemode(){
        document.getElementById("i1").classList.add("hide");
        document.getElementById("i2").classList.add("hide");
    }
    function chooseall()
    {
       var tbody = document.getElementById("tb");
       var tchildlist = tbody.children;
    //    for(var element in tchildlist)
    //    {
    //       var checkbox =  tchildlist[element].children[0].children[0];
    //       checkbox.checked  = true;
    //    }
        for(var i = 0 ;i<tchildlist.length;i++)
        {        
            var checkbox = tchildlist[i].children[0].children[0];
            checkbox.checked = true;
        }
    }
    function cancelall()
    {
       var tbody = document.getElementById("tb");
       var tchildlist = tbody.children;
        for(var i = 0 ;i<tchildlist.length;i++)
        {        
            var checkbox = tchildlist[i].children[0].children[0];
            checkbox.checked = false;
        }
    }
    function reserveall()
    {
       var tbody = document.getElementById("tb");
       var tchildlist = tbody.children;
        for(var i = 0 ;i<tchildlist.length;i++)
        {        
            var checkbox = tchildlist[i].children[0].children[0];
            
            if (checkbox.checked == true)
                checkbox.checked = false;
            else 
            checkbox.checked = true;
        }
    }
    </script>
</body>
</html>
这里顺便纠正了一个JavaScript的观点
for in循环中
JavaScript循环的是索引而不是某个内容
最后编辑于：2019.02.21 21:30:01