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