javascript 提交弹窗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.c1{
position: fixed;
left: ;
top: ;
right: ;
bottom: ;
background-color: black;
opacity: 0.6;
z-index: ;
} .c2{
width: 500px;
height: 400px;
background-color: white;
position: fixed;
left: %;
top: %;
margin-left: -250px;
margin-top: -200px;
z-index: ;
} /*k
</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="Reverse()">
<table>
<thead>
<tr>
<th>选择</th>
<th>主机名</th>
<th>端口</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td>
<input type="checkbox"></td>
<td>1.1.1.2</td>
<td>190</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.3</td>
<td>192</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.4</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="确定">
<input type="button" value="取消" onclick="HideModel()"> </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
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
checkbox.checked = false }
} function Reverse() {
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
if(checkbox.checked){
checkbox.checked=false;
}else{
checkbox.checked=true;
} }
} </script> </body>
</html>
javascript 提交弹窗的更多相关文章
- JavaScript实现弹窗报错
JavaScript实现弹窗报错 1.具体错误如下 SCRIPT 5022:cannot call methods on dialog prior to initialization; attempt ...
- Javascript - ExtJs - 弹窗
1.确认对话框 Ext.MessageBox.alert( title,content,fn) Ext.onReady(function () { Ext.Msg.alert("好吧, ...
- Javascript提交表单
<form action="login.do?act=login" method="post"> <input type="subm ...
- 用JavaScript写弹窗
每个弹窗的标识var x =0; var idzt = new Array(); var Window = function(config){ ID不重复 idzt[x] = "zhuti& ...
- 前台技术--通过javaScript提交表单
window.location=pp+"?username="+getCookie("username")+"&userid="+g ...
- 关于javascript提交到java后台空格去不掉ASCII为160的解决办法
今天正则表达式匹配一个字符串,怎么都不对. 用正则表达式去掉尝试str.replaceAll("\\s*",""); 在或者用replaceAll(" ...
- JavaScript表单提交四种方式
总结JavaScript表单提交四种方式 <!DOCTYPE html> <html> <head> <title>JavaScript表单提交四种方式 ...
- javascript form提交 不执行onsubmit事件解决方案
转载自:https://www.cnblogs.com/lorgine/archive/2011/03/30/2000284.html 今天做项目过程中,需要用到javascript提交form到后台 ...
- 浅谈Supermap iClient for JavaScript 弹窗类
地图作为信息的载体和呈现方式,是GIS的重要组成部分,它是一个浏览信息的窗口,在信息日益发达的今天 ,各种地图应用如雨后春笋一般出现在大众眼前,而不是像以往一样太过局限于专业的领域.而弹窗,是作为地图 ...
随机推荐
- camke 参数
cmake -DCMAKE_INSTALL_PREFIX=/application/mysql-5.5.32 \ -DMYSQL_DATADIR=/application/mysql-5.5.32 ...
- Swagger 生成 PHP API 接口文档
Swagger 生成 PHP API 接口文档 Lumen微服务生成Swagger文档 1.概况 有同学反馈写几十个接口文档需要两天的工作量, 随着多部门之间的协作越来越频繁, 维护成本越来越高, 文 ...
- NYIST 46 最少乘法次数
最少乘法次数 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 给你一个非零整数,让你求这个数的n次方,每次相乘的结果可以在后面使用,求至少需要多少次乘.如24:2*2 ...
- Hdu4786
Fibonacci Tree Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) T ...
- lua实现大数运算
lua实现的大数运算,代码超短,眼下仅仅实现的加减乘运算 ------------------------------------------------ --name: bigInt --creat ...
- angularjs作用域和函数调用
<!DOCTYPE HTML> <html ng-app> <head> <meta http-equiv="Content-Type" ...
- JNI 资源释放
JNI 编程实现了 native code 和 Java 程序的交互,因此 JNI 代码编程既遵循 native code 编程语言的编程规则,同时也遵守 JNI 编程的文档规范.在内存管理方面,na ...
- 7.配置文件mocha.opts
转自:http://www.ruanyifeng.com/blog/2015/12/a-mocha-tutorial-of-examples.html Mocha允许在test目录下面,放置配置文件m ...
- zookeeper伪分布安装配置
1.下载路径为:http://mirrors.cnnic.cn/apache/zookeeper/stable/ 2.安装: 第一步 解压zookeeper压缩包: 进入 zookeeper安装目录 ...
- mysql主从复制主服务器日志格式的区别
statement(语句级别,从服务器直接把语句拿来执行): 影响一大片(插入很多条或修改很多条),就适合用 statement row(行级别,从服务器直接 ...