博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

dom实例，模态框，全选，反选，取消

Posted on 2018-07-30 22:37  alex_hrg  阅读(242)  评论(0)    收藏  举报 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .zhezhao{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: black;
            opacity: 0.6;
            z-index: 9;
        }
        .add_mod{
            height:400px;
            width:500px;
            position: fixed;
            background-color: white;
            left: 50%;
            top: 50%;
            margin-left: -250px;
            margin-top: -200px;
            z-index: 10;
        }
    </style>
</head>
<body style="margin: 0 auto;">
<input type="button" onclick="fun2()" value="添加" />
<input type="button" onclick="choise_all()" value="全选" />
<input type="button" onclick="cancel_all()" value="取消" />
<input type="button" onclick="reverse_all()" value="反选" />
<div>
    <table border="1px">
        <thead>
            <tr>
                <th>选择</th>
                <th>IP</th>
                <th>端口</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox"/></td>
                <td>1.1.1.1</td>
                <td>900</td>
            </tr>
            <tr id="tb">
                <td><input type="checkbox"/></td>
                <td>1.1.1.2</td>
                <td>902</td>
            </tr>
            <tr>
                <td><input type="checkbox"/></td>
                <td>1.1.1.3</td>
                <td>903</td>
            </tr>
        </tbody>
    </table>
</div>
<!--遮罩层-->
<div id="i1" class="zhezhao hide"></div>
<!--模块弹窗开始-->
<div id="i2" class="add_mod hide">
    <input type="text" />
    <input type="text" />
    <input type="button" onclick="fun1()" value="取消" />
    <input type="button" value="确定" />
</div>
<!--模块弹窗结束-->
<script type="application/javascript">
    function fun1() {
        document.getElementById('i1').classList.add('hide');
        document.getElementById('i2').classList.add('hide');
    }
    function fun2() {
        document.getElementById('i1').classList.remove('hide');
        document.getElementById('i2').classList.remove('hide');
    }
    function choise_all() {
        var tr = document.getElementById('tb');
        var trlist = tr.parentElement.children;
        for (var i=0;i<trlist.length;i++) {
            trlist[i].children[0].children[0].checked = true;
        }
    }
    function cancel_all() {
        var tr = document.getElementById('tb');
        var trlist = tr.parentElement.children;
        for (var i=0;i<trlist.length;i++) {
            trlist[i].children[0].children[0].checked = false;
        }
    }
    function reverse_all() {
        var tr = document.getElementById('tb');
        var trlist = tr.parentElement.children;
        for (var i=0;i<trlist.length;i++) {
            trlist[i].children[0].children[0].checked = ! trlist[i].children[0].children[0].checked;
//            以下是if判断写法
//            if (trlist[i].children[0].children[0].checked) {
//                trlist[i].children[0].children[0].checked = false;
//            }else {
//                trlist[i].children[0].children[0].checked = true;
//            }
        }
    }
</script>
</body>
</html>