JavaScript与DOM组合动态创建表格实例

简介
  这篇文章简单介绍了DOM 1.0一些基本而强大的方法以及如何在JavaScript中使用它们。你可以学到如何动态地创建、获取、控制和删除HTML元素。这些DOM方法同样适用于XML。所有全面支持DOM 1.0的浏览器都能很好地运行本篇的实例,比如IE5,Firefox等。
概况 - Sample1.html
  这篇文章通过实例代码介绍DOM。请从尝试下面的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>
</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对象树:

sample1-tabledom.jpg


  你只需使用少量的DOM方法就可以构造这样一个表格和他的子元素。记住要时刻谨记你将创建的构造的模型树;这样会使编写代码更加简单。在图中的< table >树里,< table >有一个子元素< tbody >。< tbody >有两个子元素。< tbody >的每个子元素(< tr >)都有两个子元素< td >。最后,每个< td >有一个子元素:一个文本节点。  
基本的DOM方法 - Sample2.html
  getElementByTagName方法适用于文档和元素,所以文档根对象和所有的元素对象一样有 getElementByTagName 方法。你可以使用 element.getElementsByTagName(tagname) 来获取某个元素所有子元素的列表,使用标签名选择它们。
  element.getElementsByTagName 返回一个有特定标签名的子元素的列表。你可以通过调用一个item方法(传递一个index参数给它)来从这个子元素列表中获取一个元素。请注意列表第一个子元素的index为0。下一个主题继续前面的Table例子。下面这个实例更加简单,显示了一些基本的方法:

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wddjyz.html