模态对话框和全选反选

一、目标

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

　　效果：

二、事例

　　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>

更多专业前端知识，请上【猿2048】www.mk2048.com

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/361697.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！