首頁
文章清單
RSS 
|
8/17 08' 
為了動態在頁面中增加或異動資料，有愈來愈多的需求必需使用到 createElement()，我在「填字九宮格」中就使用了 createElement() 建立表格來顯示結果。
要活用 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"> </td>
<td width="528"> </td>
</tr>
<td> </td>
<td height="21" colspan="3" align="left" valign="top" id="upid"> </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語法到資料庫呢?
