Day14 Javascript 点击添加出弹窗，取消隐藏弹窗小练习 反选，全选，取消边框

时间：2021-06-29 02:42:50

点击添加出弹窗，取消隐藏弹窗小练习

代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        .hide{

            display: none;

        }

        .c1{

            position: fixed;

            left: 0;

            top:0;

            right: 0;

            bottom: 0;

            background-color: black;

            opacity: 0.6;

        }

        .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();">

        <table>

            <thead>

            <tr>

                <th>主机名</th>

                <th>端口</th>

            </tr>

            <tr>

                <td>1.1.1.1</td>

                <td>192</td>

            </tr>

            <tr>

                <td>1.1.1.2</td>

                <td>190</td>

            </tr>

            </thead>

            <!--<tr> 标签定义 HTML 表格中的行。-->

            <!--<td> 标签定义 HTML 表格中的标准单元格。-->

            <!--<th>定义表格内的表头单元格。-->

        </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="取消" onclick="HideModel();">

            <input type="button" value="确定">

        </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');

    }

</script>

</body>

</html>

　　

在上面的基础上加上反选，全选，取消边框的代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        .hide{

            display: none;

        }

        .c1{

            position: fixed;

            left: 0;

            top:0;

            right: 0;

            bottom: 0;

            background-color: black;

            opacity: 0.6;

        }

        .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="quanxuan();">

        <input type="button" value="取消" onclick="quxiao();">

        <input type="button" value="反选" onclick="fanxuan();">

        <table>

            <thead>

            <tr>

                <th>选择</th>

                <th>主机名</th>

                <th>端口</th>

            </tr>

            </thead>

            <tbody id="tb">

            <tr>

                <td><input type="checkbox"></td>

                <td>1.1.1.1</td>

                <td>192</td>

            </tr>

            <tr>

                <td><input type="checkbox"></td>

                <td>1.1.1.2</td>

                <td>190</td>

            </tr>

            </tbody>

            <!--<tr> 标签定义 HTML 表格中的行。-->

            <!--<td> 标签定义 HTML 表格中的标准单元格。-->

            <!--<th>定义表格内的表头单元格。-->

        </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="取消" onclick="HideModel();">

            <input type="button" value="确定">

        </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 quanxuan() {

        var tbody = document.getElementById('tb');

        var tr_list = tbody.children;

        //获取所有的tr标签

        for (var i = 0; i < tr_list.length; i++) {

            //循环所有的tr

            var current_tr = tr_list[i];

            var checkbox = current_tr.children[0].children[0];

            //前面的选择框是根据checked 的值为 true 和 false来判断的

            checkbox.checked = true;

        }

    }

        function quxiao() {

            var tbody = document.getElementById('tb');

            var tr_list = tbody.children;

            //获取所有的tr标签

            for (var i = 0; i < tr_list.length; i++) {

                //循环所有的tr

                var current_tr = tr_list[i];

                var checkbox = current_tr.children[0].children[0];

                //前面的选择框是根据checked 的值为 true 和 false来判断的

                checkbox.checked = false;

            }

        }

        function fanxuan() {

        var tbody = document.getElementById('tb');

        var tr_list = tbody.children;

        //获取所有的tr标签

        for(var i=0;i<tr_list.length;i++){

            //循环所有的tr

            var current_tr = tr_list[i];

            var checkbox = current_tr.children[0].children[0] ;

            //前面的选择框是根据checked 的值为 true 和 false来判断的

//            checkbox.checked = true;

            if (checkbox.checked){

                checkbox.checked = false;

            }else {

                checkbox.checked = true;

            }

        }

    }

</script>

</body>

</html>

　　

相关文章