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 ...
随机推荐
- 树形DP-----HDU4003 Find Metal Mineral
Find Metal Mineral Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65768/65768 K (Java/Other ...
- C#分布式存储演练（提供项目下载）
C#简单的演练了一下分布式的存储,学习fastdns的结构,Client向ProcessCenter请求Storage的服务,然后上传文件. 分布式服务就是多个服务器作为客户端互相[配合],要中心化就 ...
- C#winform拖动无边框窗体
private bool isMouseLeftKeyDown = false; private Point mousePointToClient = new Point();//相对于本窗体鼠标位置 ...
- sqlServer2008技术内幕笔记总结（实用的sql方法总结）
over函数的使用: 1.可以实现基于什么求和,省去group by: select xingming,xingbie,COUNT(*) over() as '总人数' from jbxx_xuesh ...
- [Violet]樱花
题目链接 洛谷 狗粮版 前置技能 初中基础的因式分解 线性筛 \(O(nlog)\)的分解质因数 唯一分解定理 题解 首先来分解一下式子 \[\frac{1}{x}+\frac{1}{y}=\frac ...
- Delphi XE8中开发DataSnap程序常见问题和解决方法 （三）用TClientDataSet的“ProviderName”属性连接服务器时，无法找到服务器端的“DatasetProvier”
当我们在客户端用TClientDataSet的“ProviderName”属性连接服务器时,无法找到服务器端的“DatasetProvier”!! 问题原因:服务器端对提供服务的控件所属单元选择错误. ...
- 移动端适配video适配
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- oracle为IN OUT变量或OUT变量赋值时提示“表达式''不能用作赋值目标”
是因为IN OUT变量和OUT变量是要输出的,不能赋给它常量值,这样它就不能再被赋值而输出了,所以是禁止赋常量值的,比如''也是常量值,也不可以赋给这两种类型的变量,如果不能把存储过程中的其他变量赋给 ...
- 创建Oracle synonym 详解
--创建使用同义词 --同义词就是给表.视图等对象取得别名,用于简化对其的访问 --分为2种: --私有同义词:用户自己创建自己使用的 --公共同义词:dba创建,给其它用户使用的 --为dept_s ...
- 停止memcached服务
telnet 127.0.0.1 11211 进入memcache stats 查看pid号 退出memcache kill -9 pid号