模态对话框和全选反选

一、目标

制作一个表格，第一行分别为选择、主机名和端口
增加一个按钮，名称为添加
点击添加按钮，出现一个半透明的遮罩层，遮罩层中间有个弹出框
弹出框中有两个输入框，分别为主机名和端口，还有两个按钮，分别为确定和取消
点击取消按钮，遮罩层和弹出框消失
表格下方增加三个按钮，分别为全选、取消和反选
点击全选则选择这一列的选择框全部选上，取消则全部不选择，反选则和已选状态相反。

　　效果：

二、事例

　　2.1 制作表格和添加按钮　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <!--添加按钮-->
        <input type="button" value="添加" />
    </div>
    <div>
        <!--表格-->
        <table border="1">
            <thead>
                <tr>
                    <th>选择</th>
                    <th>主机名</th>
                    <th>端口</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>1.1.1.1</td>
                    <td>191</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>
</body>
</html>

　　2.2 实现遮罩层和弹出框　

# body 中html
    <!--遮罩层-->
    <div class="c1"></div>
    <!--弹出框-->
    <div class="c2">
        <div style="margin-left: 120px; margin-top: 15px">
            <span>主机名:</span>
            <input type="text" />
        </div>
        <div style="margin-left: 120px; margin-top: 18px">
            <span>端口号:</span>
            <input type="text" />
        </div>
        <div style="margin-left: 200px; margin-top: 20px">
            <input type="button" value="确定">
            <input type="button" value="取消">
        </div>

    </div>

# css样式
<style>
        .c1{
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: black;
            opacity: 0.6;
            z-index: 9;
        }
        .c2{
            position: fixed;
            height: 150px;
            width: 500px;
            top: 50%;
            left: 50%;
            margin-top: -200px;
            margin-left: -250px;
            background-color: white;
            z-index: 10;
        }
</style>

　　效果：

　　2.3 实现js，点击添加出现遮罩层和弹出框，点击取消则没有

　　利用display：none可以是标签消失的特性，为遮罩层和弹出框都在增加一个hidden的CSS样式。修改原理的HTML代码　

# 增加一个CSS样式
.hidden{
            display: none;
        }

# 修改遮罩层和弹出框
<!--遮罩层-->
<div id="i1" class="c1 hidden">
<!--弹出框-->
<div id="i2" class="c2 hidden">


# 为添加和取消按钮增加一个onclick事件
<!--添加按钮-->
<input type="button" value="添加" onclick="AddModel();" />

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


# 添加JS代码
<!--JS内容-->
    <script>
        function AddModel() {
            document.getElementById('i1').classList.remove('hidden');
            document.getElementById('i2').classList.remove('hidden');
        }
        function HideModel() {
            document.getElementById('i1').classList.add('hidden');
            document.getElementById('i2').classList.add('hidden');
        }
    </script>

　　实现效果：点击添加按钮则出现遮罩层和弹出框，点击取消则恢复原样

　　2.4 实现全选、取消和反选的功能

　　（1）增加3个按钮功能

<!--全选、取消和反选-->
    <div style="padding: 5px 0">
        <input type="button" value="全选" onclick="ChooseAll();" />
        <input type="button" value="取消" onclick="CancelAll();" />
        <input type="button" value="反选" onclick="ReverseAll();" />
    </div>

　　（2）为<tbody>增加一个id属性　

<tbody id="tb">

　　（3）编辑JS　

// 全选
        function ChooseAll() {
            // tag获取标签<tbody>
            var tag = document.getElementById('tb');
            // 通过children获取所有子标签组成的数组
            var t_list = tag.children;
            /*
                循环t_list,先获取tr即每行
                再获取每行中的第一个元素，即第一个td
                再获取第一个td中的第一个属性checkbox
             */
            for(var i=0;i<t_list.length;i++){
                var check = t_list[i].children[0].children[0];
                // 设置checken，true为选中
                check.checked = true
            }
        }
        // 取消
        function CancelAll() {
            var tag = document.getElementById('tb');
            var t_list = tag.children;
            for(var i=0;i<t_list.length;i++){
                var check = t_list[i].children[0].children[0];
                check.checked = false
            }
        }
        // 反选
        function ReverseAll() {
            var tag = document.getElementById('tb');
            var t_list = tag.children;
            for(var i=0;i<t_list.length;i++){
                var check = t_list[i].children[0].children[0];
                if(check.checked){
                    check.checked = false;
                }else {
                    check.checked = true;
                }
            }
        }

　　完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hidden{
            display: none;
        }
        .c1{
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: black;
            opacity: 0.6;
            z-index: 9;
        }
        .c2{
            position: fixed;
            height: 150px;
            width: 500px;
            top: 50%;
            left: 50%;
            margin-top: -200px;
            margin-left: -250px;
            background-color: white;
            z-index: 10;
        }
    </style>
</head>
<body>
    <div>
        <!--添加按钮-->
        <input type="button" value="添加" onclick="AddModel();" />
    </div>
    <div>
        <!--表格-->
        <table border="1">
            <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>191</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 hidden"></div>
    <!--弹出框-->
    <div id="i2" class="c2 hidden">
        <div style="margin-left: 120px; margin-top: 15px">
            <span>主机名:</span>
            <input type="text" />
        </div>
        <div style="margin-left: 120px; margin-top: 18px">
            <span>端口号:</span>
            <input type="text" />
        </div>
        <div style="margin-left: 200px; margin-top: 20px" />
            <input type="button" value="确定">
            <input type="button" value="取消" onclick="HideModel();" />
        </div>

    </div>
    <!--全选、取消和反选-->
    <div style="padding: 5px 0">
        <input type="button" value="全选" onclick="ChooseAll();" />
        <input type="button" value="取消" onclick="CancelAll();" />
        <input type="button" value="反选" onclick="ReverseAll();" />
    </div>

    <!--JS内容-->
    <script>
        function AddModel() {
            document.getElementById('i1').classList.remove('hidden');
            document.getElementById('i2').classList.remove('hidden');
        }
        function HideModel() {
            document.getElementById('i1').classList.add('hidden');
            document.getElementById('i2').classList.add('hidden');
        }
        // 全选
        function ChooseAll() {
            // tag获取标签<tbody>
            var tag = document.getElementById('tb');
            // 通过children获取所有子标签组成的数组
            var t_list = tag.children;
            /*
                循环t_list,先获取tr即每行
                再获取每行中的第一个元素，即第一个td
                再获取第一个td中的第一个属性checkbox
             */
            for(var i=0;i<t_list.length;i++){
                var check = t_list[i].children[0].children[0];
                // 设置checken，true为选中
                check.checked = true
            }
        }
        // 取消
        function CancelAll() {
            var tag = document.getElementById('tb');
            var t_list = tag.children;
            for(var i=0;i<t_list.length;i++){
                var check = t_list[i].children[0].children[0];
                check.checked = false
            }
        }
        // 反选
        function ReverseAll() {
            var tag = document.getElementById('tb');
            var t_list = tag.children;
            for(var i=0;i<t_list.length;i++){
                var check = t_list[i].children[0].children[0];
                if(check.checked){
                    check.checked = false;
                }else {
                    check.checked = true;
                }
            }
        }
    </script>
</body>

</html>

posted @ 2018-06-29 10:58 Bigberg 阅读(242) 评论(0) 编辑收藏举报

刷新页面返回顶部

模态对话框和全选反选

一、目标

二、事例

公告