模态对话框和全选反选

一、目标

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

　　效果：

　　

二、事例

　　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，一经查实，立即删除！

相关文章

（转）iReaper for wp7正式发布

（转）iReaper for wp7正式发布

原文地址&#xff1a;http://www.cnblogs.com/AlexCheng/archive/2012/02/06/2339968.htmliReaper for windows phone 7今天正式发布了。有windows phone 7手机的朋友可以通过手机在线收听收看webcast中文课程。只要你有网络任何时间任何地点都可以学习微软技术&#xff0c;为您…
阅读更多...
Neo4j：Cypher –避免热切

Neo4j：Cypher –避免热切

当心渴望的管道 尽管我喜欢Cypher的LOAD CSV命令使它容易地将数据获取到Neo4j中的方法&#xff0c;但它目前打破了最不惊奇的规则&#xff0c;因为它急切地在所有行中加载某些查询&#xff0c;即使是那些使用定期提交的查询。 这是我的同事Michael在第二篇博客文章中指出的&a…
阅读更多...
一步步构建大型网站架构 [转]

一步步构建大型网站架构 [转]

来源: itivy 原文链接 之前我简单向大家介绍了各个知名大型网站的架构&#xff0c;MySpace的五个里程碑、Flickr的架构、YouTube的架构、PlentyOfFish的架构、WikiPedia的架构。这几个都很典型&#xff0c;我们可以从中获取很多有关网站架构方面的知识&#xff0c;看了之后你…
阅读更多...
img、列表和table标签

img、列表和table标签

一、img图片 <body><a href"https://www.fmtxt.com"><img src"images/1.jpg" title"哆啦A梦" style"height: 200px; width: 200px " alt"哆啦A梦"/></a></body>1. 放在 a 标签中&#xff0c…
阅读更多...
Java基础笔记之数据类型

Java基础笔记之数据类型

一、数据类型 &#xff08;一&#xff09;8种基本数据类型(内置数据类型\C#中为值类型) 字符长度&#xff1a;1byte 8 bit;布尔&#xff1a;可认为是 1byte (8 bit);字符&#xff1a;char&#xff1a;2/16整型:short: 2/16int: 4/32long: 16/64浮点型:float: 8/32double: 16/6…
阅读更多...
SSTI模板注入基础（Flask+Jinja2）

SSTI模板注入基础（Flask+Jinja2）

文章目录 一、前置知识1.1 模板引擎1.2 渲染 二、SSTI模板注入2.1 原理2.2 沙箱逃逸沙箱逃逸payload讲解其他重要payload 2.3 过滤绕过点.被过滤下划线_被过滤单双引号 "被过滤中括号[]被过滤关键字被过滤 三、PasecaCTF-2019-Web-Flask SSTI参考文献 一、前置知识 1.1 模…
阅读更多...
关于Java的十件事

关于Java的十件事

那么&#xff0c;您从一开始就一直在使用Java&#xff1f; 还记得曾经被称为“ Oak”的日子&#xff0c;OO仍然是热门话题&#xff0c;C 人士认为Java没有机会&#xff0c;Applet还是一件事吗&#xff1f; 我敢打赌&#xff0c;您至少不了解以下一半内容。 让我们从本周开始&a…
阅读更多...
注释，无处不在的注释

注释，无处不在的注释

十年前的2004年 &#xff0c; Java 1.5开始提供注释。 很难想象没有此功能的代码。 实际上&#xff0c;首先引入了注释&#xff0c;以减轻开发人员编写繁琐的样板代码的痛苦&#xff0c;并使代码更具可读性。 考虑一下J2EE 1.4&#xff08;没有可用的注释&#xff09;和Java EE…
阅读更多...
JZTK项目 驾照题库项目servlet层得到的json字符串在浏览器中 汉字部分出现问号？无法正常显示的解决方法

JZTK项目 驾照题库项目servlet层得到的json字符串在浏览器中 汉字部分出现问号？无法正常显示的解决方法

servlet层中的代码如下&#xff1a; package com.swift.jztk.servlet;import java.io.IOException;import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletReque…
阅读更多...
【RTOS】基于V7开发板的uCOS-III，uCOS-II，RTX4，RTX5，FreeRTOS原版和带CMSIS-RTOS V2封装层版全部集齐...

【RTOS】基于V7开发板的uCOS-III，uCOS-II，RTX4，RTX5，FreeRTOS原版和带CMSIS-RTOS V2封装层版全部集齐...

RTOS模板制作好后&#xff0c;后面堆各种中间件就方便了。 1、基于V7开发板的最新版uCOS-II V2.92.16程序模板&#xff0c;含MDK和IAR&#xff0c;支持uC/Probehttps://www.cnblogs.com/armfly/p/11255981.html 2、基于V7开发板的最新版uCOS-III V3.07.03程序模板&#xff0c;含…
阅读更多...
三极管开关电路设计（转）

三极管开关电路设计（转）

三极管开关电路设计 三极管除了可以当做交流信号放大器之外&#xff0c;也可以做为开关之用。严格说起来&#xff0c;三极管与一般的机械接点式开关在动作上并不完全相同&#xff0c;但是它却具有一些机械式开关所没有的特点。图1所示&#xff0c;即为三极管电子开关的基本电路…
阅读更多...
OpenShift上具有NetBeans的Java EE

OpenShift上具有NetBeans的Java EE

今天是慕尼黑的NetBeans日 。 我很高兴提出一个关于将Red Hat产品与我著名的IDE集成的会议。 因此&#xff0c;我一直在谈论WildFly &#xff0c; EAP &#xff0c;Git和OpenShift Online&#xff0c;并展示了使用该工具集优化开发工作流程的所有不同方式。 大约有100位与会者…
阅读更多...
tomcat.apache startup.bat闪退两种解决方法

tomcat.apache startup.bat闪退两种解决方法

tomcat bin文件夹中的startup.bat闪退原因及解决方法两种 方法一&#xff1a;在启动tomcat时闪退&#xff0c;重新检查java的jre运行环境。如果环境变量忘记配置一定会导致了tomcat的闪退。 追加 Apache的bin的环境变量也放到path中 注意检查一下看 JAVA_HOME是否写错&#xff…
阅读更多...
产生的DLL （VS2005, MATLAB7.5, mwArray）

产生的DLL （VS2005, MATLAB7.5, mwArray）

from: http://www.simwe.com/forum/thread-801187-1-1.html 程序中使用MATLAB编译产生的DLL &#xff08;VS2005, MATLAB7.5, mwArray&#xff09; 最近有几个帖子都在讨论有关在C程序中使用MATLAB编译产生的动态链接库DLL。本 来想用原来帖子中给出的m代码作为例子&#xff0c…
阅读更多...
启动LINUX下的TFTP服务器

启动LINUX下的TFTP服务器

第一步: 我们要确认,LINUX下是不是安装了TFTP-SERVER. 在LINUX下输入: rpm -q tftp-server 如出现如下回复: tftp-server-0.39-2 则表示tftp-server已安装. 第二步: 修改TFTP启动脚本: 方法一: 需要修改ftptpd的启动脚本vi /etc/xinetd.d/tftp加上 disable no 此时即可启动tf…
阅读更多...
简单代码生成器原理剖析（一）

简单代码生成器原理剖析（一）

上篇文章&#xff08;深入浅出三层架构&#xff09;分析了简单三层架构的实现。包括Model,DAL&#xff08;数据访问层&#xff09;,BLL&#xff08;业务逻辑层&#xff09;的实现。 实际开发中&#xff0c;由于重复代码的操作&#xff0c;会花费大量时间&#xff0c;如果以代码…
阅读更多...
Qt学习之路(4)：初探信号槽

Qt学习之路(4)：初探信号槽

看过了简单的Hello, world! 之后&#xff0c;下面来看看Qt最引以为豪的信号槽机制&#xff01;所谓信号槽&#xff0c;简单来说&#xff0c;就像是插销一样&#xff1a;一个插头和一个插座。怎么说呢&#xff1f;当某种事件发生之后&#xff0c;比如&#xff0c;点击了一下鼠标…
阅读更多...
注解的力量 -----Spring 2.5 JPA hibernate 使用方法的点滴整理（六）： 一些常用的数据库 注解...

注解的力量 -----Spring 2.5 JPA hibernate 使用方法的点滴整理（六）： 一些常用的数据库 注解...

一、 实体 Bean 每个持久化POJO类都是一个实体Bean, 通过在类的定义中使用 Entity 注解来进行声明。 声明实体Bean Entitypublic class Flight implements Serializable { Long id; Id public Long getId() { return id; } public void setId(Long id) { this.id id; }} E…
阅读更多...
SWT鼠标单击实现

SWT鼠标单击实现

最近&#xff0c;我做了一些SWT定制小部件的开发&#xff0c;偶然发现了一个问题&#xff0c; 为什么没有默认的SWT鼠标单击侦听器&#xff1f; 由于这个主题有时会提出&#xff0c;所以我认为写一两句话来说明背后的理性基础以及如何实现鼠标单击通常不会受到伤害。 SWT鼠标请…
阅读更多...
响应式布局笔记

响应式布局笔记

一. 布局设计 固定布局&#xff1a;以像素作为页面的基本单位&#xff0c;不管设备屏幕及浏览器宽度&#xff0c;只设计一套尺寸&#xff1b; 可切换的固定布局&#xff1a;同样以像素作为页面单位&#xff0c;参考主流设备尺寸&#xff0c;设计几套不同宽度的布局。通过设别的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023