您的位置：首页 > Web前端 > JavaScript

转 使用JavaScript和DOM动态创建表格

2013-01-06 10:49 796 查看
概况 － Sample1.html
<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>

基本的DOM方法 － Sample2.html
　　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>
使用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。


使用文档对象和createElement(..)方法创建新元素
　
　你可以使用createElement方法创建新的HTML元素或者其他任何你想要的其他元素。例如，如果你想为< body
>元素添加一个字节点< p
>元素，可以使用前例中的myBody添加一个新的元素节点。创建一个节点只需要调用
document.createElement(”tagname”)。例如：

myNewPTAGnode = document.createElement("p");
myBody.appendChild(myNewPTAGnode);



使用removeChild(..)方法删除节点
　　每个节点都可以删除。下面这行代码删除myP（第二个< p >元素）里包含单词world的文本节点。

myP.removeChild(myTextNode);

　　最后你可以把包含单词world的文本节点myTextNode添加到新创建的< p >元素里：

myNewPTAGnode.appendChild(myTextNode);

　　修正的对象树最后像这样：



动态创建一个[b]表格（回到Sample1.html）[/b]
　　文章的剩余部分将回到Sample1.html。下图显示了例子中创建的表格的对象树结构。
回顾HTML[b]表格结构[/b]



创建元素节点并把它们添加到文档树
创建sample1.html里的表格的基本步骤：

获取body对象（文档对象的第一项）

创建所有的元素

最后，按照上图的表格结构添加每一个字节点下面的源代码是sample1.html的注释


start函数的最后有一行新代码，使用另一个DOM方法setAttribute设置了表格的border属性。setAttribute方法有两个参数：属性名和属性值。你可以使用setAttribute方法设置任何元素的任何属性。



<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航