首頁新隨筆新文章聯系聚合

posts - 2,comments - 2,trackbacks - 0

2025年6月

>

日

一

二

三

四

五

六

25

26

27

28

29

30

31

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

1

2

3

4

5

1. 我要讀書。
2. 路.慢慢走
莫心急。

常用鏈接

留言簿

隨筆檔案(2)

2009年11月 (2)

文章分類(109)

文章檔案(89)

2008年12月 (89)

搜索

閱讀排行榜

評論排行榜

javascript動態增加行的錯誤（問題比較經典）

轉自: http://www.javaeye.com/problems/2639

<html>
<head>
<title>動態添加html元素</title>
<script type="text/javascript">
<!--
var textNumber = 1;
function addCheckDetail(form,afterElement){
textNumber++;
//創建列表標簽
var label2=document.createElement("label");
label2.appendChild(document.createTextNode("問題所屬方面："));
var select=document.createElement("select");
select.setAttribute("select","select"+textNumber);
select.setAttribute("size","1");
select.setAttribute("id","select"+textNumber);
var option1=document.createElement("option");
option1.setAttribute("value","1");
option1.appendChild(document.createTextNode("方面一"));
var option2=document.createElement("option");
option2.setAttribute("value","2");
option2.appendChild(document.createTextNode("方面二"));
label2.appendChild(select);
select.appendChild(option1);
select.appendChild(option2);
form.insertBefore(label2,afterElement);
// 創建文本標簽
var label1 = document.createElement("label");
// 創建文本框
var textField = document.createElement("textarea");
textField.setAttribute("name","txt"+textNumber);
textField.setAttribute("cols",80);
textField.setAttribute("rows",3);
textField.setAttribute("id","txt"+textNumber);
// 增加標簽文本注釋
label1.appendChild(document.createTextNode("問題描述"+textNumber+":"));
// 把textField放入標簽中
label1.appendChild(textField);
// 把所有的這些增加到form中
form.insertBefore(label1,afterElement);
}
function removeCheckDetail(form,afterElement){
// 假如有文本框個數超過一個
if (textNumber > 1) {
// 刪除最后一個添加的文本框
form.removeChild(document.getElementById("select"+textNumber).parentNode);
form.removeChild(document.getElementById("txt"+textNumber).parentNode);
textNumber--;
}
}
//-->
</script>
<style type="text/css">
<!--
label {
display:block;
margin:.25em 0em;
}
-->
</style>
</head>
<body>
<form id="myForm" method="get" action="./" />

<html>
<head>
<title>動態添加html元素</title>
<script type="text/javascript">
<!--
var textNumber = 1;
function addCheckDetail(form,afterElement){
textNumber++;
//創建列表標簽
var label2=document.createElement("label");
label2.appendChild(document.createTextNode("問題所屬方面："));
var select=document.createElement("select");
select.setAttribute("select","select"+textNumber);
select.setAttribute("size","1");
select.setAttribute("id","select"+textNumber);
var option1=document.createElement("option");
option1.setAttribute("value","1");
option1.appendChild(document.createTextNode("方面一"));
var option2=document.createElement("option");
option2.setAttribute("value","2");
option2.appendChild(document.createTextNode("方面二"));
label2.appendChild(select);
select.appendChild(option1);
select.appendChild(option2);
form.insertBefore(label2,afterElement);
// 創建文本標簽
var label1 = document.createElement("label");
// 創建文本框
var textField = document.createElement("textarea");
textField.setAttribute("name","txt"+textNumber);
textField.setAttribute("cols",80);
textField.setAttribute("rows",3);
textField.setAttribute("id","txt"+textNumber);
// 增加標簽文本注釋
label1.appendChild(document.createTextNode("問題描述"+textNumber+":"));
// 把textField放入標簽中
label1.appendChild(textField);
// 把所有的這些增加到form中
form.insertBefore(label1,afterElement);
}
function removeCheckDetail(form,afterElement){
// 假如有文本框個數超過一個
if (textNumber > 1) {
// 刪除最后一個添加的文本框
form.removeChild(document.getElementById("select"+textNumber).parentNode);
form.removeChild(document.getElementById("txt"+textNumber).parentNode);
textNumber--;
}
}
//-->
</script>
<style type="text/css">
<!--
label {
display:block;
margin:.25em 0em;
}
-->
</style>
</head>
<body>
<form id="myForm" method="get" action="./" />

<table><tbody>
<label>問題所屬方面：
<select name="select" size="1" id="">
<option value="1">問題一</option>
<option value="2">問題二</option>
</select>
</label>
<label>問題描述1:<textarea name="txt1" cols="80" rows="3"></textarea></label>
<p>
<input type="button" value="添加一個問題" onclick="addCheckDetail(this.form,this.parentNode)" />
<input type="button" value="刪除最后一個問題" onclick="removeCheckDetail(this.form)" />
</p>
<p><input type="Submit" value="保存" /></p>

<table><tbody>
<label>問題所屬方面：
<select name="select" size="1" id="">
<option value="1">問題一</option>
<option value="2">問題二</option>
</select>
</label>
<label>問題描述1:<textarea name="txt1" cols="80" rows="3"></textarea></label>
<p>
<input type="button" value="添加一個問題" onclick="addCheckDetail(this.form,this.parentNode)" />
<input type="button" value="刪除最后一個問題" onclick="removeCheckDetail(this.form)" />
</p>
<p><input type="Submit" value="保存" /></p>

</tbody></table>
</form>
</body>
</html>

</tbody></table>
</form>
</body>
</html>

我想用javascript動態增加行,當form中沒有table標簽時是可以增加的,像上面增加了table標簽就出現錯誤了,請問各位該如何解決?

=======================================
解決方案:
由于form.insertBefore是將指定節點添加到form的直接子節點上,由于form中只有一個table,沒有afterElement這個直接子節點.所以會報錯.
input標簽的parentNode即p標簽,它的直接父結點是TBODY標簽.所以只能用TBodyElement.insertBefore.進行插入.

把

Js代碼

form.insertBefore(label2,afterElement);
form.insertBefore(label1,afterElement);

form.insertBefore(label2,afterElement);
form.insertBefore(label1,afterElement);

兩句改為:

afterElement.parentNode.insertBefore(label2,afterElement);
afterElement.parentNode.insertBefore(label1,afterElement);

afterElement.parentNode.insertBefore(label2,afterElement);
afterElement.parentNode.insertBefore(label1,afterElement);

posted on 2008-12-15 23:23 CopyHoo 閱讀(810) 評論(0) 編輯收藏所屬分類: Java Web

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: 正則表達式 DFA and NFA 關于 jsp 的解釋執行。 tomcat 根據自己的測試結果學習。 javascript動態增加行的錯誤（問題比較經典） js細節札記 html 的 select 組關于 select 的添加 option 應該注意的問題。 select元素的options.add 與 insertbefore的區別工程在不斷改正后，在web 上面沒有顯示出來的原因解析。關于頁面以及 iframe 造成的縮進。