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

<!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>
巴特西

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

最新文章

热门文章
