以下為本站文章分類清單

  1. AJAXspacer
  2. ASPspacer
  3. CSSspacer
  4. Javascriptspacer
  5. Windows 應用程式spacer
  6. 網頁設計
  7. 評論、短文、雜文spacer
  8. 版主spacer
  9. 最新回應spacer

以下為本頁本文內容

createElement() 在表單中的應用例

8/17 08' icon

為了動態在頁面中增加或異動資料,有愈來愈多的需求必需使用到 createElement(),我在「填字九宮格」中就使用了 createElement() 建立表格來顯示結果。

createElement() 與 createTextNode()

要活用 createElement() 和 createTextNode() 前,必需要先明白 HTML 標籤結構,例如:

<span id="mTitle">必需先明白 HTML 標籤結構</span>

這裡 <span> 就是我們熟知的標籤,id 則為 <span> 屬性,<span> 和 </span> 中間的字,在 HTML 眼中,就很單純是文字,但如果用 XML 的角度來看,就是一個「文字節點(Text Node)」。

所以,結構就變成:

<標籤>文字節點</標籤>

所以建立的方式,就變成:

這意思很淺顯:先建立一個 span 標籤,再建立一個文字節點, 裡面包含文字,最後把文字「附加(appendChild())」到 span 標籤之後。

這種概念就像在包裝貨品,先包最裡層,再逐步往外層包。到這裡,算建立完成了,不過還沒結束,目前只能算是「在工廠組裝完成」,還沒真正放到頁面裡。

網頁發展,一直到目前為止,都是傳輸固定的靜態資料到使用者瀏覽器中,這和每天你收到的報紙一樣,是「固定」內容,這種情況直到了瀏覽器支援了 DOM 規格後才有了改變。

DOM 把所有網頁內容全部當作「節點」看待,如果你沒有節點概念,就把節點當作樂高積木吧!一塊一塊組合起來就變成成品,過去是用膠水黏起來,沒法拆解,現在改成樂高,隨時中間可以拆開,加進新東西進去!

所以,在工廠裡組好的元件,最後要加到現有頁面內容中,至於加到那裡?就看你的需要,如:

這個例子就是把這段 <span> 加到 ID 為 page 的區塊中。

應用到表單中

看一個小例子:

其中表單的原始部份為:

addRow() 的內容則為:

 註解都寫在裡面了,有興趣的人研究看看。

以下為文章回應區

同意轉載,不過麻煩看一下轉載需知

ALLEN   2011/11/21 上午 09:15:00

感謝大大分享這篇
十分實用
其他網站上寫的非常攏長 不易看懂
剛好最近的case要用到此技術
先在這感謝你阿

sparkz   2011/8/14 上午 10:53:00

謝謝卜大!!

卜維丰   2011/8/9 下午 04:08:00

to sparkz

function deleteRow(tableID,r)
{
var i=r.parentNode.parentNode.rowIndex;
document.getElementById(tableID).deleteRow(i);
}

sparkz   2011/7/30 下午 09:30:00

你好,
小弟上網找到如果要刪除table的row,可利用下面這個方法
function deleteRow(r)
{
var i=r.parentNode.parentNode.rowIndex;
document.getElementById('myTable').deleteRow(i);
}
</script>
但是這個方法要如何對應多個table呢?而不是只能刪除"myTable"這個table的row呢?
麻煩你了

james   2010/7/29 下午 01:37:00

請問此下拉式選單在擇時,如何改變前方圖片
..謝謝您的抽空回答!
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript">
function setup()
{
if(window.form1.count.value >7){
alert("新增項目超出限制");
return false;
}else{
str='';
}
if(!window.form1.count.value||window.form1.count.value<2){
window.form1.count.value=1;
}
for(i=1;i<=window.form1.count.value;i++){
str+=i+
'<img name="face[]" id="face[]" src="images/msicon/ic01.gif"/>'+
'<select name="icon[]" id="icon[]" onchange="chimg();">'+
'<option value="ic01" selected="selected">開心</option>'+
'<option value="ic02">生氣</option>'+
'<option value="ic03">抗議</option>'+
'<option value="ic04">感動</option>'+
'<option value="ic05">怒罵</option>'+
'</select><br>';
window.upid.innerHTML=str;
function chimg(){ //這一段換圖的語法怎麼寫
var option = document.getElementById('icon').value;
var face = document.getElementById('face').value;
document.face.src="images/msicon/"+document.option+".gif";
} //這一段換圖的語法怎麼寫
}
}
</script>
</head>
<body>
<form name="form1" id="form1" action="#" method="post">
<table width="600" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="66">&nbsp;</td>
<td width="528">&nbsp;</td>
</tr>
<td>&nbsp;</td>
<td height="21" colspan="3" align="left" valign="top" id="upid">&nbsp;</td>
</tr>
<td> <input name="count" type="text" value="2" size="3" maxlength="2" /></td>
<td><input type="button" name="Buttom" onclick="setup();" class="button" value="確定" /></td>
</tr>
</table>
</form>
</body>
</html>

Raccoon   2009/10/9 上午 01:32:00

To sky

php 不是要用$_FILE?
$myArray=$_FILE[fileNew];
$myArray["name"][0];
$myArray["name"][1];


sky   2009/3/27 下午 08:24:00

我想用這個例子改編成可以動態新增上傳欄位及
文字欄位

但是請問我要如何取到動態產生出來的欄位的值呢0.0
我有是過將新產生出來的欄位 name=fileNew[]

PHP
再用$myArray=$_POST[fileNew]
可是取得不到
可以幫解答嗎
3Q

卜維丰   2008/10/11 下午 01:35:00

matt, 原則上作法是...

d.removeChild(d的child)

但,d 的子節點可能很多, 所以要用迴路, 大致上是如此作法

var d= document.getElementById(xxx);

if (d.hasChildNodes()){
while (d.childNodes.length >= 1 ){
d.removeChild(d.firstChild);
}
}

matt   2008/10/10 下午 06:59:00

請問一下您的這個例子來說,如果我要刪除text_field下的所有節點要如何做??

d = document.getElementById("text_field");
d.parentElement.removeChild(d);
我是用這個,但是似乎會連text_field給一起刪除

卜維丰   2008/8/20 下午 03:12:00

ironman, 這個例子和後台, 後台資料庫一點關係也沒有啊

ironman   2008/8/19 下午 09:05:00

不過,
那辦法動態新增欄位與SQL語法到資料庫呢?

給個回應
姓名:
佈落格網址:
  如果您是要發問問題, 最好有個問題測試的網址, 這樣比較容易找到您問題所在, 謝謝
內容: