使用JavaScript和DOM动态创建表格(1)

最新推荐文章于 2021-03-19 14:30:45 发布

转载最新推荐文章于 2021-03-19 14:30:45 发布 · 1.5k 阅读

文章标签：

#javascript #table #html #文档 #border #firefox

ajax 专栏收录该内容

11 篇文章

订阅专栏

本文通过实例展示了如何利用DOM1.0方法与JavaScript动态创建HTML表格，包括创建、获取、控制及删除HTML元素的基本操作。

简介
这篇文章简单介绍了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>

</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() {
// 获取一个包含所有body元素的列表（将只有一个）
// 然后选择列表里的第一个元素
myBody = document.getElementsByTagName("body")[0];

// 获取body字元素中所有的p元素
myBodyElements = myBody.getElementsByTagName("p");

//获取p元素列表的第二个元素（索引从0开始）
myP = myBodyElements[1];
}

</script>
</head>
<body onload="start()">
<p>hi</p>
<p>hello</p>
</body>
</html>

在这个例子里，我们设置myP变量为表示body里第二个p元素的DOM对象。
1.获取一个包含所有body元素的列表

myBody = document.getElementsByTagName("body")[0];

因为一个有效的html文档只有一个body元素，这个列表讲只有一项。我们通过使用 [0] 选取列表的第一个元素来得到它。
2.获取blog子元素里所有的p元素

myBodyElements = myBody.getElementsByTagName("p");

3.选取p元素列表的第二项

myP = myBodyElements[1];

一旦获得一个html元素的DOM对象，你就可以设置它的属性。比如，你想设置style background color属性，只需要添加：

myP.style.background = "rgb(255,0,0)";

使用document.createTextNode(”..”)创建文本节点
使用文档对象调用createTextNode方法建立你的文本节点。你只需要输入文本内容。返回值是一个表示这个文本节点的对象。

myTextNode = document.createTextNode("world");

以上代码创建一个文本数据是“word”的TEXT_NODE类型（文字块）节点，变量myTextNode指向这个节点对象。你需要设置这个文本节点为其他节点元素的字节点来插入这个文本到你的html页面里。
使用appendChild(..)插入元素
所以，通过调用myP.appendChild([node_element])，你设置这个文本节点为第二个p元素的字节点。

myP.appendChild(myTextNode);

测试这个例子，注意“hello”和“world”两个词是连在一起的：“helloworld”。所以在当你看到html页面时两个文本节点 hello和world看起来好像是一个节点，而实际上在这个文档模型里有两个节点。第二个节点是一个新的TEXT_NODE类型节点，并且是第二个p标签的第二个字节点。下图在文档树里显示了刚创建的文本节点。

createTextNode和appendChild是在hello和world之间添加空格的一种简单的方法。需要特别注意的是 appendChild方法将添加在最后一个子节点后面，就像world被添加到hello后面。所以如果你想在hello和world之间添加一个文本节点需要使用insertBefore方法而不是appendChild。