最近調了兩天的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>

經過多次調試和測試,有興趣的話,可以去測試一下,挺有意思的!會有意想不到的樂趣!