【卜維丰】createElement() 在表單中的應用例

createElement() 在表單中的應用例

8/17 08'

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

createElement() 與 createTextNode()

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

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

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

所以，結構就變成：

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

所以建立的方式，就變成：

var span=document.createElement('span'); var cText=document.createTextNode('必需先明白HTML標籤結構'); span.appendChild(cText);

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

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

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

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

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

var span=document.createElement('span'); var cText=document.createTextNode('必需先明白HTML標籤結構'); span.appendChild(cText); var obj=document.getElementById('page'); obj.appendChild(span);

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

應用到表單中

看一個小例子：

其中表單的原始部份為：

addRow() 的內容則為：

function addRow(){ //取得屬於要應用新增列的區塊 var obj=document.getElementById('text_field'); //取得目前有多少欄位 var sIndex=obj.getElementsByTagName('div').length+1; //依照原表單格式,先建一個div var div=document.createElement('div'); //再建立文字欄位,並指定相關屬性 var input=document.createElement('input'); input.type='text'; input.name='t'+sIndex; input.id='t'+sIndex; //再建立按鈕,並指定相關屬性 var btn=document.createElement('input'); btn.type='button'; btn.value='下一筆'; btn.onclick=function(){addRow();} //把文字欄位和按鈕加到div中 div.appendChild(input); div.appendChild(btn); //把div加到區塊中 obj.appendChild(div); }

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

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

添加搜藏

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語法到資料庫呢?

給個回應

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

以下為本站文章分類清單

以下為本站側欄內容

以下為最近發表的文章

以下為本頁本文內容

createElement() 在表單中的應用例

createElement() 與 createTextNode()

應用到表單中

以下為文章回應區


	無法播放 Flash 時替代的文字內容