【转】运用JavaScript和DOM动态创建表格
日期：2014-05-16 浏览次数：20405 次
【转】使用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?onload="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方法?－?Sample2.html
getElementByTagName方法适用于文档和元素，所以文档根对象和所有的元素对象一样有?getElementByTagName?方法。你可以使用?element.getElementsByTagName(tagname)?来获取某个元素所有子元素的列表，使用标签名选择它们。
element.getElementsByTagName?返回一个有特定标签名的子元素的列表。你可以通过调用一个item方法（传递一个index参数给它）来从这个子元素列表中获取一个元素。请注意列表第一个子元素的index为0。下一个主题继续前面的Table例子。下面这个实例更加简单，显示了一些基本的方法：
<html>
<head>
<title>实例代码?-?使用JavaScript和DOM创建HTML表格</title>
<script>
function?start()?{
//?获取一个包
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
