JS及Dom练习 | 模态对话框及复选框操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dom复选框操作</title>
<style>
.hide{
display: none;
}
.c1{
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: black;
opacity: 0.6;
z-index: 9;
}
.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="ChooseAll();" />
<input type="button" value="取消" onclick="CancleAll();" />
<input type="button" value="反选" onclick="ReverseAll();" />
<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>190</td>
</tr>
<tr>
<td><input type="checkbox"f id="test" /></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 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 ChooseAll(){
var tbody = document.getElementById('tb');
// 获取所有的tr
var tr_list = tbody.children;
for(var i=0;i<tr_list.length;i++){
// 循环所有的tr，current_tr
var current_tr = tr_list[i];
var checkbox = current_tr.children[0].children[0];
checkbox.checked = true;
}
}
function CancleAll(){
var tbody = document.getElementById('tb');
// 获取所有的tr
var tr_list = tbody.children;
for(var i=0;i<tr_list.length;i++){
// 循环所有的tr，current_tr
var current_tr = tr_list[i];
var checkbox = current_tr.children[0].children[0];
checkbox.checked = false;
}
}
function ReverseAll(){
var tbody = document.getElementById('tb');
// 获取所有的tr
var tr_list = tbody.children;
for(var i=0;i<tr_list.length;i++){
// 循环所有的tr，current_tr
var current_tr = tr_list[i];
var checkbox = current_tr.children[0].children[0];
if(checkbox.checked){checkbox.checked = false;}else{checkbox.checked = true;}}}
</script>
</body>
</html>
JS及Dom练习 | 模态对话框及复选框操作的更多相关文章
- python之tkinter使用-复选框操作
# tkinter复选框操作 import tkinter as tk root = tk.Tk() root.title('问卷调查') root.geometry('220x80') # 设置窗口 ...
- C#：复选框操作类
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.W ...
- 006.MFC_对话框_复选框_单选钮
对话框和控件复选框单选框分组框示例:三原色画图 一.建立名为Demo2的MFC工程,按照下图添加控件 并修改2个Group Box Caption属性分别为颜色.外观 修改3个Check Box Ca ...
- seleniumu 3.0复选框操作(定位一组元素）
一般验证复选框是否可以选择点击常用到定位一组元素去循环遍历执行点击事件.但是有时候在不同的浏览器下可能会存在差异化的最终结果. 目前谷歌浏览器常常存在多次点击同一复选框,导致最终最后两项复选框均未被勾 ...
- 【jQuery】对于复选框操作的attr与prop
这个是在jQuery1.6版本号之后出现的鬼东西.受影响的主要有下拉列表select与复选框checkbox.众所周知.在jQuery中能够用attr()取出节点的属性,然而对于checkbox却不是 ...
- jQuery——复选框操作
学习jQuer对表单.表格操作的过程中,按照书上的例子发现一个问题: <!DOCTYPE html> <html> <head> <title>复选框应 ...
- DataGridView 复选框 操作大全
DataGridViewCheckBoxColumn dtCheck = new DataGridViewCheckBoxColumn(); dtCheck.DataPropertyName = &q ...
- python selenium单/复选框操作
一.单选:radio 1.首先是定位选择框的位置 2.定位id,点击图标就可以了,代码如下(获取url地址方法:把上面源码粘贴到文本保存为.html后缀后用浏览器打开,在浏览器url地址栏复制出地址就 ...
- [asp.net] 通过JS实现对treeview控件的复选框单选控制。
前端JS代码: //识别不同的浏览器 function getTargetElement(evt) { var elem if (evt.target) { elem = (evt.target.no ...
随机推荐
- 福大软工1816｜K班—alpha冲刺
Part.1 开篇 队名:彳艮彳亍团队 组长博客:戳我进入 作业博客:班级博客本次作业的链接 Part.2 成员汇报 组员1(组长)柯奇豪 过去两天完成了哪些任务 了解前端方面的相关内容,便于后续对进 ...
- 一张图看懂ASP.NET MVC5认证和授权过滤器的执行顺序
IAuthenticationFilter是MVC5中的新特性,它有2个关键方法: OnAuthentication OnAuthenticationChallenge 当IAuthenticatio ...
- jQuery高级
一.动画效果 常用的几种效果都是没有easing参数的,也即动画只能swing.$(selector).animate(styles,speed,easing,callback)中是有easing参数 ...
- 门面（Facade）模式
门面(Facade)模式 也叫 外观模式. 外观模式:为子系统中的一组接口提供一个一致的界面,此模式定义了一个高层接口,这个接口使得子系统更加容易使用 /* * 门面(Facade)角色:客户端可以 ...
- Android 自定义ViewGroup，实现侧方位滑动菜单
侧方位滑动菜单 1.现在adnroid流行的应用当中很多都是用的侧方位滑动菜单如图:
- wp后台更新瓷片
下载源码 还有一种方式,更新瓷片方式 1. /// <summary> /// 定时更新磁贴 /// </summary> public class ShellUpdate { ...
- winform treeview绑定数据 DOM操作
form1 public void treeView() { // datatable 定义变量接收 传归来的值 DataTable Father = new BuMenDA().ConSql(); ...
- HBase基准性能测试报告
作者:范欣欣 本次测试主要评估线上HBase的整体性能,量化当前HBase的性能指标,对各种场景下HBase性能表现进行评估,为业务应用提供参考.本篇文章主要介绍此次测试的基本条件,HBase在各种测 ...
- 光猫烽火Hg220破解超级口令实用图文教程（亲测）
1.用光猫背后的useradmin 帐号和密码登录 192.168.1.12.然后下载http://192.168.1.1/backupsettings.conf3.用记事本打开,ctrl+F,查找关 ...
- Sample-Code:Bing Search API
Demo link: http://code.msdn.microsoft.com/windowsazure/How-to-use-bing-search-API-4c8b287e Aspx Code ...