最近调了两天的JavaScript,现总结一下,作为自己的备忘录,都是一些很浅显的例子。
有两个jsp文件:
父窗口
parent.jsp
<%
@ page language
=
"
java
"
import
=
"
java.util.*
"
pageEncoding
=
"
GB2312
"
%>
<%
String path
=
request.getContextPath();
String basePath
=
request.getScheme()
+
"
://
"
+
request.getServerName()
+
"
:
"
+
request.getServerPort()
+
path
+
"
/
"
;
%>
<!
DOCTYPE HTML PUBLIC
"
-//W3C//DTD HTML 4.01 Transitional//EN
"
>
<
html
>
<
head
>
<
base href
=
"
<%=basePath%>
"
>
<
title
>
Parent
</
title
>
<
meta http
-
equiv
=
"
pragma
"
content
=
"
no-cache
"
>
<
meta http
-
equiv
=
"
cache-control
"
content
=
"
no-cache
"
>
<
meta http
-
equiv
=
"
expires
"
content
=
"
0
"
>
<
meta http
-
equiv
=
"
keywords
"
content
=
"
keyword1,keyword2,keyword3
"
>
<
meta http
-
equiv
=
"
description
"
content
=
"
This is my page
"
>
<
script type
=
"
text/javascript
"
>
function openChild()
{
//
把新打开的窗口放到最顶层,没有子窗口
//
window.open("child.jsp", target="_top");
//
新打开一个窗口,用window.opener.document.all得到
window.open(
"
child.jsp
"
, target
=
"
_blank
"
);
}
function scriptSubmit()
{
//
var formParent = document.formParent;
//
提交的action,可以直接写form名称,因为它是一个文档模型节点的子节点,直接可以获得。
formParent.action
=
"
child.jsp
"
;
//
强制弹出一个新页面
formParent.target
=
"
_blank
"
;
//
提交
formParent.submit();
}
//
回车提交表单
function enterSubmit()
{
if
(event.keyCode
==
13
)
{
event.returnValue
=
false
;
event.cancel
=
true
;
formParent.login.click();
}
}
//
向table中添加tr
function add_tr()
{
//
alert("abc");
//
all后面带id,否则报错
var my_tab
=
document.all(
"
addtrTable
"
);
var tab_rows
=
my_tab.rows.length;
//
现有行数
var tab_cells
=
my_tab.cells.length;
//
现有列数
//
alert(tab_rows + " " + tab_cells);
var new_row
=
my_tab.insertRow(tab_rows
-
1
);
//
在最后一个tr前插入一个tr
//
可以不定义,但是如果cell = "abc",则必须定义,不然报没有定义异常
cell
=
new_row.insertCell();
cell.innerHTML
=
'
<input type="button" name="delbtn" value="删除" onclick="hidden_tr()">
'
;
cell
=
new_row.insertCell();
cell.innerHTML
=
'
<input type="text" name="username" value="">
'
;
cell
=
new_row.insertCell();
cell.innerHTML
=
'
<input type="radio" name="sex" value="1" checked="checked">男 <input type="radio" name="sex" value="0">女
'
;
}
//
隐藏table中的tr
function hidden_tr()
{
//
alert(event.srcElement);
//
alert(event.srcElement.parentElement.parentElement);
//
得到表格的所有节点
var my_tab
=
document.all(
"
addtrTable
"
);
//
得到事件的父元素的父元素
var tr
=
event.srcElement.parentElement.parentElement;
//
得到表格所有节点的长度
var len
=
my_tab.rows.length;
//
只有一个tr的时候不隐藏
//
alert(len);
//
var field2 = my_tab.rows[tr.rowIndex].cells[3].firstChild;
//
删除行
//
my_tab.deleteRow(tr.rowIndex);
//
必须初始化
var iCount
=
0
;
//
循环时去掉第一个为table,最后一个为插入一行
for
(var i
=
1
; i
<
len
-
1
; i
++
)
{
//
alert(my_tab.rows[i].style.display);
if
(my_tab.rows[i].style.display
!=
"
none
"
)
{
iCount
++
;
}
}
//
alert(iCount);
if
(iCount
==
1
)
{
alert(
"
必须保留一行
"
);
return
;
}
/**/
/*
if(tr.rowIndex == 1) {
alert("授权号为必填项");
return;
}
*/
//
得到行索引
//
alert("行索引" + tr.rowIndex);
//
把当前行的第4个单元格置空
//
field2.value = "";
//
把tr设置为不可见
tr.style.display
=
"
none
"
;
}
</
script
>
</
head
>
<
body
>
<%--<
%
//
清空缓存,也有的叫页面过期,有人误会以为清空缓存后,然后点击后退就会跳到一个页面,
//
上面有一个页面已过期,要刷新才能看到新页面,其实这里意思并不是这样,只是当您后退时
//
清空了文本框的值而已,密码是默认清空的,避免重复提交。
/**/
/*
response.setHeader("pragma", "no-cache");
response.setHeader("cache-control", "no-cache");
response.setHeader("expires", "0");
*/
%>--%>
<
form name
=
"
formParent
"
method
=
"
post
"
>
<
table style
=
"
background-color: #D4E1EE;border-bottom-color: #cccccc
"
cellpadding
=
"
1
"
cellspacing
=
"
0
"
border
=
"
0
"
>
<
tr
>
<
td
>
用户名
</
td
>
<
td
>
<
input name
=
"
formname
"
type
=
"
text
"
>
</
td
>
</
tr
>
<
tr
>
<
td
>
密码
</
td
>
<
td
>
<
input name
=
"
password
"
type
=
"
password
"
onkeydown
=
"
enterSubmit()
"
>
</
td
>
</
tr
>
<
tr
>
<
td
>
<%--
window.open方法不能在submit触发,否则子窗口得不到父窗口的值
--%>
<
input type
=
"
submit
"
name
=
"
login
"
value
=
"
登录
"
>
</
td
>
<
td
>
<%--
按钮不能执行JavaScript提交
--%>
<
input type
=
"
button
"
name
=
"
btn
"
value
=
"
跳转
"
onclick
=
"
openChild()
"
>
</
td
>
</
tr
>
</
table
>
<%--
强制在新窗口中打开超链接
--%>
<
a href
=
"
child.jsp
"
target
=
"
_blank
"
>
Child
</
a
>
</
form
>
<
form name
=
"
addtrForm
"
method
=
"
post
"
>
<
table id
=
"
addtrTable
"
name
=
"
addtrTable
"
style
=
"
background-color: #D4E1EE;border-bottom-color: #cccccc
"
cellpadding
=
"
1
"
cellspacing
=
"
0
"
border
=
"
0
"
>
<
tr align
=
"
center
"
>
<
td
>
操作
</
td
>
<
td
>
姓名
</
td
>
<
td
>
性别
</
td
>
</
tr
>
<
tr align
=
"
center
"
>
<
td
>
<
input type
=
"
button
"
name
=
"
delbtn
"
value
=
"
删除
"
onclick
=
"
hidden_tr()
"
>
</
td
>
<
td
>
<
input type
=
"
text
"
name
=
"
username
"
value
=
""
>
</
td
>
<
td
>
<
input type
=
"
radio
"
name
=
"
sex
"
value
=
"
1
"
checked
=
"
checked
"
>
男
&
nbsp;
<
input type
=
"
radio
"
name
=
"
sex
"
value
=
"
0
"
>
女
</
td
>
</
tr
>
<
tr
>
<
td colspan
=
"
2
"
>
<
input type
=
"
button
"
name
=
"
addbtn
"
value
=
"
插入一行
"
onclick
=
"
add_tr()
"
>
</
td
>
</
tr
>
</
table
>
</
form
>
</
body
>
</
html
>
子窗口
child.jsp
<%@ page language="java" import="java.util.*" pageEncoding="GB2312"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>Child</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript">
function getParentValue() {
// target="_blank"
var formname = window.opener.document.all.formParent.formname;
var password = window.opener.document.all.password;
alert("用户名:" + formname.value + "\n密码:" + password.value)
// 刷新父窗口
//window.opener.location.reload();
}
</script>
</head>
<body onload="getParentValue()">
<%
String username = request.getParameter("username");
String password = request.getParameter("password");
out.println("用户名:" + username + "<br>密码:" + password);
%>
</body>
</html>
经过多次调试和测试,有兴趣的话,可以去测试一下,挺有意思的!会有意想不到的乐趣!