<!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 提交弹窗的更多相关文章

  1. JavaScript实现弹窗报错

    JavaScript实现弹窗报错 1.具体错误如下 SCRIPT 5022:cannot call methods on dialog prior to initialization; attempt ...

  2. Javascript - ExtJs - 弹窗

    1.确认对话框 Ext.MessageBox.alert( title,content,fn) Ext.onReady(function () {    Ext.Msg.alert("好吧, ...

  3. Javascript提交表单

    <form action="login.do?act=login" method="post"> <input type="subm ...

  4. 用JavaScript写弹窗

    每个弹窗的标识var x =0; var idzt = new Array(); var Window = function(config){ ID不重复 idzt[x] = "zhuti& ...

  5. 前台技术--通过javaScript提交表单

    window.location=pp+"?username="+getCookie("username")+"&userid="+g ...

  6. 关于javascript提交到java后台空格去不掉ASCII为160的解决办法

    今天正则表达式匹配一个字符串,怎么都不对. 用正则表达式去掉尝试str.replaceAll("\\s*","");  在或者用replaceAll(" ...

  7. JavaScript表单提交四种方式

    总结JavaScript表单提交四种方式 <!DOCTYPE html> <html> <head> <title>JavaScript表单提交四种方式 ...

  8. javascript form提交 不执行onsubmit事件解决方案

    转载自:https://www.cnblogs.com/lorgine/archive/2011/03/30/2000284.html 今天做项目过程中,需要用到javascript提交form到后台 ...

  9. 浅谈Supermap iClient for JavaScript 弹窗类

    地图作为信息的载体和呈现方式,是GIS的重要组成部分,它是一个浏览信息的窗口,在信息日益发达的今天 ,各种地图应用如雨后春笋一般出现在大众眼前,而不是像以往一样太过局限于专业的领域.而弹窗,是作为地图 ...

随机推荐

  1. camke 参数

    cmake -DCMAKE_INSTALL_PREFIX=/application/mysql-5.5.32 \   -DMYSQL_DATADIR=/application/mysql-5.5.32 ...

  2. Swagger 生成 PHP API 接口文档

    Swagger 生成 PHP API 接口文档 Lumen微服务生成Swagger文档 1.概况 有同学反馈写几十个接口文档需要两天的工作量, 随着多部门之间的协作越来越频繁, 维护成本越来越高, 文 ...

  3. NYIST 46 最少乘法次数

    最少乘法次数 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 给你一个非零整数,让你求这个数的n次方,每次相乘的结果可以在后面使用,求至少需要多少次乘.如24:2*2 ...

  4. Hdu4786

    Fibonacci Tree Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) T ...

  5. lua实现大数运算

    lua实现的大数运算,代码超短,眼下仅仅实现的加减乘运算 ------------------------------------------------ --name: bigInt --creat ...

  6. angularjs作用域和函数调用

    <!DOCTYPE HTML> <html ng-app> <head> <meta http-equiv="Content-Type" ...

  7. JNI 资源释放

    JNI 编程实现了 native code 和 Java 程序的交互,因此 JNI 代码编程既遵循 native code 编程语言的编程规则,同时也遵守 JNI 编程的文档规范.在内存管理方面,na ...

  8. 7.配置文件mocha.opts

    转自:http://www.ruanyifeng.com/blog/2015/12/a-mocha-tutorial-of-examples.html Mocha允许在test目录下面,放置配置文件m ...

  9. zookeeper伪分布安装配置

    1.下载路径为:http://mirrors.cnnic.cn/apache/zookeeper/stable/ 2.安装: 第一步 解压zookeeper压缩包: 进入 zookeeper安装目录 ...

  10. mysql主从复制主服务器日志格式的区别

        statement(语句级别,从服务器直接把语句拿来执行):            影响一大片(插入很多条或修改很多条),就适合用 statement       row(行级别,从服务器直接 ...