使用DOM物件方法動態創建表格，第一列為列序號，第二列為文本框，第三列中為洗掉按鈕
uj5u.com熱心網友回復：
請從嘗試下面的HTML例子開始。它使用DOM 1的方法由JavaScript動態創建一個HTML表格。它創建一個由四個包含文本內容的單元格組成的小表格。單元格的文字內容是：“單元格是第y行第 x列”，表示單元格在表格中的行數和列數。<html>
<head>
<title>實體代碼 - 使用JavaScript和DOM創建HTML表格</title>
<script>
function start() {
//獲取body標簽
var mybody = document.getElementsByTagName("body")[0];
// 創建一個<table>元素和一個<tbody>元素
mytable = document.createElement("table");
mytablebody = document.createElement("tbody");
//創建所有的單元格
for(var j = 0; j < 2; j++) {
// 創建一個<tr>元素
mycurrent_row = document.createElement("tr");
for(var i = 0; i < 2; i++) {
// 創建一個<td>元素
mycurrent_cell = document.createElement("td");
//創建一個文本節點
currenttext = document.createTextNode("單元格是第"+j+"行，第"+i+"列");
// 將創建的文本節點添加到<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屬性設定為2
mytable.setAttribute("border", "2");
}
</script>
</head>
<body "start()">
</body>
</html>
注意我們創建各元素和文位元組點的順序：
1.創建< table >元素
2.創建< table >的子元素< tbody >
3.使用一個回圈來創建< tbody >的子元素< tr >
4.分別使用回圈為每一個< tr >創建子元素< tb >
5.為每一個< tb >創建文本節點
創建完< table >,< tbody >,< tr >,< td >元素和文本節點，我們使用相反的順序把它們分別添加到自己的父節點。
1.將創建的文本節點添加到< 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);
記住這個方法。當你使用W3C DOM時會經常用到它。首先，你從上向下建立元素；然后從下向上把它們添加到父節點。
這是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物件樹：
你只需使用少量的DOM方法就可以構造這樣一個表格和他的子元素。記住要時刻謹記你將創建的構造的模型樹；這樣會使撰寫代碼更加簡單。在圖中的< table >樹里，< table >有一個子元素< tbody >。< tbody >有兩個子元素。< tbody >的每個子元素（< tr >）都有兩個子元素< td >。最后，每個< td >有一個子元素：一個文本節點。
基本的DOM方法
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/37707.html
標籤：基礎類
下一篇：c++