Day14 Javascript 点击添加出弹窗，取消隐藏弹窗小练习 反选，全选，取消边框
点击添加出弹窗，取消隐藏弹窗小练习
代码如下：
<!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>
Day14 Javascript 点击添加出弹窗，取消隐藏弹窗小练习 反选，全选，取消边框的更多相关文章
- jquery checkbox 复选框多次点击判断选中状态,以及全选/取消的代码示例
2015年12月21日 10:52:51 星期一 目标, 点击当前的checbox, 判断点击后当前checkbox是否是选中状态. html: <input type="checkb ...
- AngularJS--购物车全选/取消全选功能实现
刚学习angularJS,于是练习写了一个类似于购物车的全选/取消全选的功能,主要实现的功能有: 1.勾选全选checkbox,列表数据全部被勾选,取消同理,用ng-model实现双向绑定: 2.选中 ...
- js实现checkbox的全选/取消
所有的操作都将使用jquery进行. 主要是为了实现指定内容的批量/单独删除操作. 先看一下页面的设计. 实现操作的主要地方是: 首先实现单击“标题”旁的checkbox实现所有条目的选择. 要点:j ...
- Jquery CheckBox复选框 全选/取消全选 最佳实现方式 参考案例
<input id="chkAll" type="checkbox" />全选/取消全选</div> <asp:Repeater ...
- jQuery--checkbox全选/取消全选
用JavaScript使页面上的一组checkbox全选/取消全选,逻辑很简单,实现代码也没有太难的语法.但使用jQuery实现则更简单,代码也很简洁,精辟! jQuery版本:1.3.2 <h ...
- jquery 全选/取消全部
html /*主要按钮*/ <td><input type="checkbox" id="checkAllChange" /></ ...
- jQuery 复选框全选/取消全选/反选
jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...
- html checkbox 实现全选/取消全选
html checkbox 实现全选/取消全选 <html> <body> <table border="1"> <tr> < ...
- 【转载】checkbox实现全选/取消全选
比较简单.好理解的写法,做个备注.查看请前往原地址:http://blog.csdn.net/graceup/article/details/46650781 <html> <bod ...
随机推荐
- Hessian源码分析--总体架构
Hessian是一个轻量级的remoting onhttp工具,使用简单的方法提供了RMI的功能. 相比WebService,Hessian更简单.快捷.采用的是二进制RPC协议,因为采用的是二进制协 ...
- UNIX环境高级编程——线程属性
pthread_attr_t 的缺省属性值 属性 值 结果 scope PTHREAD_SCOPE_PROCESS 新线程与进程中的其他线程发生竞争. detachstate PTHREAD_CREA ...
- mxgraph进阶(三)Web绘图——mxGraph项目实战(精华篇)
Web绘图--mxGraph项目实战(精华篇) 声明 本文部分内容所属论文现已发表,请慎重对待. 需求 由于小论文实验需求,需要实现根据用户日志提取出行为序列,然后根据行为序列生成有向图的形式 ...
- Linux服务器Jboss运行环境搭建步骤和开机自动启动脚本编写运行
Jboss运行环境:Linux+Jdk+Jboss+jsp系统 Jboss软件说明:类似于Tomcat,就是一个跑Jsp系统的环境,他的站点路径跟Tomcat类似,Tomcat存放站点文件到webap ...
- 尚学堂马士兵struts2 课堂笔记(四)
27 结果类型 主要就四种种 dispatch和rediret chain和drdirectaction <package name="resultTypes" namesp ...
- Android用AlarmManager实现后台任务-android学习之旅(63)
因为Timer不能唤醒cpu,所以会在省电的原因下失效,所以需要唤醒cpu在后台稳定化的执行任务,AlarmManager能够唤醒cpu 这个例子讲解了如何通过Service来在后他每一个小时执行.特 ...
- [TCP] 网络协议流程图
之前在跟别人讲协议的时候总是找不到类似的图,这次再看python网络编程书籍的时候找到了一个,留存一份. 清晰的看到不同协议在不同层的传输过程!
- Device tree customization
Step 1: OEMs can create their own device tree by adding "qcom,msm-id/qcom,board-id" entry ...
- MinerConstanits.java 常量类
MinerConstanits.java 常量类 package com.iteye.injavawetrust.miner; /** * 常量类 * @author InJavaWeTrust * ...
- （五十六）iOS多线程之NSOperation
NSOpertation是一套OC的API,是对GCD进行的Cocoa抽象. NSOperation有两种不同类型的队列,主队列和自定义队列. 主队列运行于主线程上,自定义队列在后台运行. [NSBl ...