JavaScript與DOM組合動(dòng)態(tài)創(chuàng)建表格實(shí)例
這篇文章簡單介紹了DOM 1.0一些基本而強(qiáng)大的方法以及如何在JavaScript中使用它們。你可以學(xué)到如何動(dòng)態(tài)地創(chuàng)建、獲取、控制和刪除HTML元素。這些DOM方法同樣適用于XML。所有全面支持DOM 1.0的瀏覽器都能很好地運(yùn)行本篇的實(shí)例，比如IE5，F(xiàn)irefox等。
概況 － Sample1.html
這篇文章通過實(shí)例代碼介紹DOM。請(qǐng)從嘗試下面的HTML例子開始。它使用DOM 1的方法由JavaScript動(dòng)態(tài)創(chuàng)建一個(gè)HTML表格。它創(chuàng)建一個(gè)由四個(gè)包含文本內(nèi)容的單元格組成的小表格。單元格的文字內(nèi)容是：“單元格是第y行第x列”，表示單元格在表格中的行數(shù)和列數(shù)。
<html>
<head>
<title>實(shí)例代碼 - 使用JavaScript和DOM創(chuàng)建HTML表格</title>
<script>
function start() {
//獲取body標(biāo)簽
var mybody = document.getElementsByTagName("body")[0];
// 創(chuàng)建一個(gè)<table>元素和一個(gè)<tbody>元素
mytable = document.createElement("table");
mytablebody = document.createElement("tbody");
//創(chuàng)建所有的單元格
for(var j = 0; j < 2; j++) {
// 創(chuàng)建一個(gè)<tr>元素
mycurrent_row = document.createElement("tr");
for(var i = 0; i < 2; i++) {
// 創(chuàng)建一個(gè)<td>元素
mycurrent_cell = document.createElement("td");
//創(chuàng)建一個(gè)文本節(jié)點(diǎn)
currenttext = document.createTextNode("單元格是第"+j+"行，第"+i+"列");
// 將創(chuàng)建的文本節(jié)點(diǎn)添加到<td>里
mycurrent_cell.appendChild(currenttext);
// 將列<td>添加到行<tr>
mycurrent_row.appendChild(mycurrent_cell);
}
// 將行<tr>添加到<tbody>
mytablebody.appendChild(mycurrent_row);
}
// 將<tbody>添加到<table>
mytable.appendChild(mytablebody);
//將<table>添加到<body>
mybody.appendChild(mytable);
// 將表格mytable的border屬性設(shè)置為2
mytable.setAttribute("border", "2");
}
</script>
</head>
<body onload="start()">
</body>
</html>
注意我們創(chuàng)建各元素和文字節(jié)點(diǎn)的順序：
1.創(chuàng)建< table >元素
2.創(chuàng)建< table >的子元素< tbody >
3.使用一個(gè)循環(huán)來創(chuàng)建< tbody >的子元素< tr >
4.分別使用循環(huán)為每一個(gè)< tr >創(chuàng)建子元素< tb >
5.為每一個(gè)< tb >創(chuàng)建文本節(jié)點(diǎn)
創(chuàng)建完< table >,< tbody >,< tr >,< td >元素和文本節(jié)點(diǎn)，我們使用相反的順序把它們分別添加到自己的父節(jié)點(diǎn)。
1.將創(chuàng)建的文本節(jié)點(diǎn)添加到< td >里
mycurrent_cell.appendChild(currenttext);
2.將列< td >添加到行< tr >
mycurrent_row.appendChild(mycurrent_cell);
3.將行< tr >添加到< tbody >
mytablebody.appendChild(mycurrent_row);
4.將< tbody >添加到< table >
mytable.appendChild(mytablebody);
5.將< table >添加到< body >
mybody.appendChild(mytable);
記住這個(gè)方法。當(dāng)你使用W3C DOM時(shí)會(huì)經(jīng)常用到它。首先，你從上向下建立元素；然后從下向上把它們添加到父節(jié)點(diǎn)。
這是JavaScript代碼生成的HTML：
...
<table border=5>
<tr><td>單元格是第0行，第0列</td><td>單元格是第0行，第1列</td></tr>
<tr><td>單元格是第1行，第0列</td><td>單元格是第1行，第1列</td></tr>
</table>
...
這是代碼生成的表格元素和它的子元素的DOM對(duì)象樹：
你只需使用少量的DOM方法就可以構(gòu)造這樣一個(gè)表格和他的子元素。記住要時(shí)刻謹(jǐn)記你將創(chuàng)建的構(gòu)造的模型樹；這樣會(huì)使編寫代碼更加簡單。在圖中的< table >樹里，< table >有一個(gè)子元素< tbody >。< tbody >有兩個(gè)子元素。< tbody >的每個(gè)子元素（< tr >）都有兩個(gè)子元素< td >。最后，每個(gè)< td >有一個(gè)子元素：一個(gè)文本節(jié)點(diǎn)?！ ?BR>基本的DOM方法 － Sample2.html
getElementByTagName方法適用于文檔和元素，所以文檔根對(duì)象和所有的元素對(duì)象一樣有 getElementByTagName 方法。你可以使用 element.getElementsByTagName(tagname) 來獲取某個(gè)元素所有子元素的列表，使用標(biāo)簽名選擇它們。
element.getElementsByTagName 返回一個(gè)有特定標(biāo)簽名的子元素的列表。你可以通過調(diào)用一個(gè)item方法（傳遞一個(gè)index參數(shù)給它）來從這個(gè)子元素列表中獲取一個(gè)元素。請(qǐng)注意列表第一個(gè)子元素的index為0。下一個(gè)主題繼續(xù)前面的Table例子。下面這個(gè)實(shí)例更加簡單，顯示了一些基本的方法：
<html>
<head>
<title>實(shí)例代碼 - 使用JavaScript和DOM創(chuàng)建HTML表格</title>
<script>
function start() {
// 獲取一個(gè)包含所有body元素的列表（將只有一個(gè)）
// 然后選擇列表里的第一個(gè)元素
myBody = document.getElementsByTagName("body")[0];
// 獲取body字元素中所有的p元素
myBodyElements = myBody.getElementsByTagName("p");
//獲取p元素列表的第二個(gè)元素（索引從0開始）
myP = myBodyElements[1];
}
</script>
</head>
<body onload="start()">
<p>hi</p>
<p>hello</p>
</body>
</html>
在這個(gè)例子里，我們?cè)O(shè)置myP變量為表示body里第二個(gè)p元素的DOM對(duì)象。
1.獲取一個(gè)包含所有body元素的列表
myBody = document.getElementsByTagName("body")[0];
因?yàn)橐粋€(gè)有效的html文檔只有一個(gè)body元素，這個(gè)列表講只有一項(xiàng)。我們通過使用 [0] 選取列表的第一個(gè)元素來得到它。
2.獲取blog子元素里所有的p元素
myBodyElements = myBody.getElementsByTagName("p");
3.選取p元素列表的第二項(xiàng)
myP = myBodyElements[1];
一旦獲得一個(gè)html元素的DOM對(duì)象，你就可以設(shè)置它的屬性。比如，你想設(shè)置style background color屬性，只需要添加：
myP.style.background = "rgb(255,0,0)";
使用document.createTextNode(”..”)創(chuàng)建文本節(jié)點(diǎn)
使用文檔對(duì)象調(diào)用createTextNode方法建立你的文本節(jié)點(diǎn)。你只需要輸入文本內(nèi)容。返回值是一個(gè)表示這個(gè)文本節(jié)點(diǎn)的對(duì)象。
myTextNode = document.createTextNode("world");
以上代碼創(chuàng)建一個(gè)文本數(shù)據(jù)是“word”的TEXT_NODE類型（文字塊）節(jié)點(diǎn)，變量myTextNode指向這個(gè)節(jié)點(diǎn)對(duì)象。你需要設(shè)置這個(gè)文本節(jié)點(diǎn)為其他節(jié)點(diǎn)元素的字節(jié)點(diǎn)來插入這個(gè)文本到你的html頁面里。
使用appendChild(..)插入元素
所以，通過調(diào)用myP.appendChild([node_element])，你設(shè)置這個(gè)文本節(jié)點(diǎn)為第二個(gè)p元素的字節(jié)點(diǎn)。
myP.appendChild(myTextNode);
測(cè)試這個(gè)例子，注意“hello”和“world”兩個(gè)詞是連在一起的：“helloworld”。所以在當(dāng)你看到html頁面時(shí)兩個(gè)文本節(jié)點(diǎn)hello和world看起來好像是一個(gè)節(jié)點(diǎn)，而實(shí)際上在這個(gè)文檔模型里有兩個(gè)節(jié)點(diǎn)。第二個(gè)節(jié)點(diǎn)是一個(gè)新的TEXT_NODE類型節(jié)點(diǎn)，并且是第二個(gè)p標(biāo)簽的第二個(gè)字節(jié)點(diǎn)。下圖在文檔樹里顯示了剛創(chuàng)建的文本節(jié)點(diǎn)。
createTextNode和appendChild是在hello和world之間添加空格的一種簡單的方法。需要特別注意的是appendChild方法將添加在最后一個(gè)子節(jié)點(diǎn)后面，就像world被添加到hello后面。所以如果你想在hello和world之間添加一個(gè)文本節(jié)點(diǎn)需要使用insertBefore方法而不是appendChild。
使用文檔對(duì)象和createElement(..)方法創(chuàng)建新元素
你可以使用createElement方法創(chuàng)建新的HTML元素或者其他任何你想要的其他元素。例如，如果你想為< body >元素添加一個(gè)字節(jié)點(diǎn)< p >元素，可以使用前例中的myBody添加一個(gè)新的元素節(jié)點(diǎn)。創(chuàng)建一個(gè)節(jié)點(diǎn)只需要調(diào)用document.createElement(”tagname”)。例如：
myNewPTAGnode = document.createElement("p");
myBody.appendChild(myNewPTAGnode);
使用removeChild(..)方法刪除節(jié)點(diǎn)
每個(gè)節(jié)點(diǎn)都可以刪除。下面這行代碼刪除myP（第二個(gè)< p >元素）里包含單詞world的文本節(jié)點(diǎn)。
myP.removeChild(myTextNode);
最后你可以把包含單詞world的文本節(jié)點(diǎn)myTextNode添加到新創(chuàng)建的< p >元素里：
myNewPTAGnode.appendChild(myTextNode);
修正的對(duì)象樹最后像這樣：
動(dòng)態(tài)創(chuàng)建一個(gè)表格（回到Sample1.html）
文章的剩余部分將回到Sample1.html。下圖顯示了例子中創(chuàng)建的表格的對(duì)象樹結(jié)構(gòu)。
回顧HTML表格結(jié)構(gòu)
創(chuàng)建元素節(jié)點(diǎn)并把它們添加到文檔樹
創(chuàng)建sample1.html里的表格的基本步驟：
start函數(shù)的最后有一行新代碼，使用另一個(gè)DOM方法setAttribute設(shè)置了表格的border屬性。setAttribute方法有兩個(gè)參數(shù)：屬性名和屬性值。你可以使用setAttribute方法設(shè)置任何元素的任何屬性。
<head>
<title>實(shí)例代碼 - 使用JavaScript和DOM創(chuàng)建HTML表格</title>
<script>
function start() {
// 獲取body
var mybody = document.getElementsByTagName("body")[0];
// 創(chuàng)建<table>和<tbody>元素
mytable = document.createElement("table");
mytablebody = document.createElement("tbody");
//創(chuàng)建所有的單元格
for(var j = 0; j < 2; j++) {
// 創(chuàng)建一個(gè) <tr> 元素
mycurrent_row = document.createElement("tr");
for(var i = 0; i < 2; i++) {
// 創(chuàng)建一個(gè)<td> 元素
mycurrent_cell = document.createElement("td");
// 創(chuàng)建一個(gè)文本節(jié)點(diǎn)
currenttext = document.createTextNode("單元格是第" + j + "行，第" + i + "列");
// 把創(chuàng)建的文本節(jié)點(diǎn)添加到<td>元素
mycurrent_cell.appendChild(currenttext);
// 把<td>添加到<tr>行
mycurrent_row.appendChild(mycurrent_cell);
}
// 把<tr>行添加到<tbody>
mytablebody.appendChild(mycurrent_row);
}
// 把 <tbody> 添加到 <table>
mytable.appendChild(mytablebody);
// 把 <table> 添加到 <body>
mybody.appendChild(mytable);
// 把mytable的border屬性設(shè)置為2;
mytable.setAttribute("border","2");
}
</script>
</head>
<body onload="start()">
</body>
</html>
使用DOM和CSS處理表格
從表格中獲取一個(gè)文本節(jié)點(diǎn)
這個(gè)例子介紹兩個(gè)新的DOM屬性。首先使用childNodes屬性獲取mycel的字節(jié)點(diǎn)列表。這個(gè)childNodes列表包含所有的字節(jié)點(diǎn)，不管它們的名稱和類型是什么。像getElementsByTagName方法一樣，它返回一個(gè)字節(jié)點(diǎn)列表，使用 [ x ] 來獲取想要的字節(jié)點(diǎn)項(xiàng)。這個(gè)例子將myceltext存儲(chǔ)為表格第二行第二個(gè)單元格的文本節(jié)點(diǎn)。最后，它創(chuàng)建一個(gè)新的包含myceltext 的data 屬性 的文本節(jié)點(diǎn)，并使它成為< body >元素的子節(jié)點(diǎn)，來顯示這個(gè)例子的最后結(jié)果。
如果你的對(duì)象是文本節(jié)點(diǎn)，你可以使用data屬性來獲取它的內(nèi)容
mybody = document.getElementsByTagName("body")[0];
mytable = mybody.getElementsByTagName("table")[0];
mytablebody = mytable.getElementsByTagName("tbody")[0];
myrow = mytablebody.getElementsByTagName("tr")[1];
mycel = myrow.getElementsByTagName("td")[1];
// mycel的字節(jié)點(diǎn)列表的第一項(xiàng)
myceltext=mycel.childNodes[0];
// currenttext的內(nèi)容是myceltext的data
currenttext=document.createTextNode(myceltext.data);
mybody.appendChild(currenttext);
獲取一個(gè)屬性值
在sample1的最后有一個(gè)單元格使用了mytable對(duì)象的setAttribute方法。這個(gè)單元格用來設(shè)置這個(gè)表格的border屬性。使用getAttribute方法來獲取這個(gè)屬性：
mytable.getAttribute("border");
通過改變style屬性隱藏列
當(dāng)你使用一個(gè)JavaScript變量指向?qū)ο?，你可以立即設(shè)置它的style屬性。下面的代碼是sample1.html的修改，第二列的單元格都被隱藏，第一列的單元格背景改為紅色。注意style屬性是直接設(shè)置的。
<html>
<body onload="start()">
</body>
<script>
function start() {
var mybody =document.getElementsByTagName("body")[0];
mytable = document.createElement("table");
mytablebody = document.createElement("tbody");
for(var j = 0; j < 2; j++) {
mycurrent_row=document.createElement("tr");
for(var i = 0; i < 2; i++) {
mycurrent_cell = document.createElement("td");
currenttext = document.createTextNode("單元格是:" + i + j);
mycurrent_cell.appendChild(currenttext);
mycurrent_row.appendChild(mycurrent_cell);
// 如果在第0列設(shè)置單元格背景色
// 如果在第1列隱藏單元格
if (i == 0) {
mycurrent_cell.style.background = "rgb(255,0,0)";
} else {
mycurrent_cell.style.display = "none";
}
}
mytablebody.appendChild(mycurrent_row);
}
mytable.appendChild(mytablebody);
mybody.appendChild(mytable);
}
</script>
</html>
- JavaScript動(dòng)態(tài)創(chuàng)建div屬性和樣式示例代碼
- javascript 動(dòng)態(tài)創(chuàng)建表格
- javascript動(dòng)態(tài)創(chuàng)建及刪除元素的方法
- JavaScript動(dòng)態(tài)創(chuàng)建link標(biāo)簽到head里的方法
- JavaScript實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建CSS樣式規(guī)則方案
- javascript轉(zhuǎn)換字符串為dom對(duì)象（字符串動(dòng)態(tài)創(chuàng)建dom）
- javascript 翻頁測(cè)試頁(動(dòng)態(tài)創(chuàng)建標(biāo)簽并自動(dòng)翻頁)
- JavaScript 動(dòng)態(tài)創(chuàng)建VML的方法
- Javascript動(dòng)態(tài)創(chuàng)建div的方法
- javascript 動(dòng)態(tài)創(chuàng)建 Option選項(xiàng)
相關(guān)文章
JavaScript基礎(chǔ)知識(shí)點(diǎn)歸納(推薦)
下面小編就為大家?guī)硪黄狫avaScript基礎(chǔ)知識(shí)點(diǎn)歸納(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07
自動(dòng)化測(cè)試讀寫64位操作系統(tǒng)的注冊(cè)表
本文主要介紹自動(dòng)化測(cè)試讀寫64位操作系統(tǒng)的注冊(cè)表,這里提供詳細(xì)的教程來實(shí)現(xiàn)自動(dòng)化讀寫64位操作系統(tǒng)的注冊(cè)表,希望能幫助測(cè)試軟件的朋友,有興趣的小伙伴可以參考下2016-08-08
這篇文章主要介紹了JS如何刪除對(duì)象中的某一屬性(delete),在這里需要注意已聲明的對(duì)象不可刪除, 對(duì)象中的對(duì)象屬性可以刪除，本文結(jié)合示例代碼給大家的非常詳細(xì)，需要的朋友可以參考下2023-01-01
JavaScript中的Navigator瀏覽器對(duì)象
2008-01-01
JavaScript replace(rgExp,fn)正則替換的用法
再看jQuery源碼的時(shí)候遇到了replace中參數(shù)為函數(shù)的用法，正好復(fù)習(xí)一下replace正則替換的用法。2010-03-03
基于javascipt-dom編程 table對(duì)象的使用
本篇文章小編為大家介紹，基于javascipt-dom編程 table對(duì)象的使用。需要的朋友參考下2013-04-04
實(shí)例講解JavaScript中instanceof運(yùn)算符的用法
JavaScript中的instanceof運(yùn)算符可以用來判斷對(duì)象類型,而更重要的是instanceof能夠判斷對(duì)象的繼承關(guān)系,這里我們就來以實(shí)例講解JavaScript中instanceof運(yùn)算符的用法2016-06-06
這篇文章主要介紹了JavaScript中正則表達(dá)式的使用方法,正則表達(dá)式是JS進(jìn)階學(xué)習(xí)中的重要知識(shí),本文簡述了JS對(duì)正則表達(dá)式的支持情況,需要的朋友可以參考下2015-06-06
javascript雖然只是一個(gè)腳本語言，但是它完全也是一個(gè)編程語言需要我們來學(xué)習(xí)一下，下面是轉(zhuǎn)載的篇關(guān)于javascript中常用的編程知識(shí)2013-04-04
下面小編就為大家?guī)硪黄狫S操作DOM的一些常用方法。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05