html动态生成表格源码,JavaScript与DOM组合动态创建表格实例_基础知识

简介

这篇文章简单介绍了DOM 1.0一些基本而强大的方法以及如何在JavaScript中使用它们。你可以学到如何动态地创建、获取、控制和删除HTML元素。这些DOM方法同样适用于XML。所有全面支持DOM 1.0的浏览器都能很好地运行本篇的实例，比如IE5，Firefox等。

概况 － Sample1.html

这篇文章通过实例代码介绍DOM。请从尝试下面的HTML例子开始。它使用DOM 1的方法由JavaScript动态创建一个HTML表格。它创建一个由四个包含文本内容的单元格组成的小表格。单元格的文字内容是：“单元格是第y行第x列”，表示单元格在表格中的行数和列数。

实例代码 - 使用JavaScript和DOM创建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 >添加到<