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


Posted in Javascript onDecember 23, 2012

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

这篇文章通过实例代码介绍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对象树:
JavaScript与DOM组合动态创建表格实例

你只需使用少量的DOM方法就可以构造这样一个表格和他的子元素。记住要时刻谨记你将创建的构造的模型树;这样会使编写代码更加简单。在图中的< table >树里,< table >有一个子元素< tbody >。< tbody >有两个子元素。< tbody >的每个子元素(< tr >)都有两个子元素< td >。最后,每个< td >有一个子元素:一个文本节点。

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];

JavaScript与DOM组合动态创建表格实例
一旦获得一个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标签的第二个字节点。下图在文档树里显示了刚创建的文本节点。
JavaScript与DOM组合动态创建表格实例

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);

JavaScript与DOM组合动态创建表格实例
使用removeChild(..)方法删除节点

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

myP.removeChild(myTextNode);

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

myNewPTAGnode.appendChild(myTextNode);

修正的对象树最后像这样:
JavaScript与DOM组合动态创建表格实例

文章的剩余部分将回到Sample1.html。下图显示了例子中创建的表格的对象树结构。
回顾HTML表格结构
JavaScript与DOM组合动态创建表格实例
创建元素节点并把它们添加到文档树
创建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>

从表格中获取一个文本节点

这个例子介绍两个新的DOM属性。首先使用childNodes属性获取mycel的字节点列表。这个childNodes列表包含所有的字节点,不管它们的名称和类型是什么。像getElementsByTagName方法一样,它返回一个字节点列表,使用 [ x ] 来获取想要的字节点项。这个例子将myceltext存储为表格第二行第二个单元格的文本节点。最后,它创建一个新的包含myceltext 的data 属性 的文本节点,并使它成为< body >元素的子节点,来显示这个例子的最后结果。

如果你的对象是文本节点,你可以使用data属性来获取它的内容

mybody = document.getElementsByTagName("body")[0]; 
mytable = mybody.getElementsByTagName("table")[0]; 
mytablebody = mytable.getElementsByTagName("tbody")[0]; 
myrow = mytablebody.getElementsByTagName("tr")[1]; 
mycel = myrow.getElementsByTagName("td")[1]; // mycel的字节点列表的第一项 
myceltext=mycel.childNodes[0]; 
// currenttext的内容是myceltext的data 
currenttext=document.createTextNode(myceltext.data); 
mybody.appendChild(currenttext);

获取一个属性值

在sample1的最后有一个单元格使用了mytable对象的setAttribute方法。这个单元格用来设置这个表格的border属性。使用getAttribute方法来获取这个属性:

mytable.getAttribute("border");

通过改变style属性隐藏列

当你使用一个JavaScript变量指向对象,你可以立即设置它的style属性。下面的代码是sample1.html的修改,第二列的单元格都被隐藏,第一列的单元格背景改为红色。注意style属性是直接设置的。

<html> 
<body onload="start()"> 
</body> 
<script> 
function start() { 
var mybody =document.getElementsByTagName("body")[0]; 
mytable = document.createElement("table"); 
mytablebody = document.createElement("tbody"); for(var j = 0; j < 2; j++) { 
mycurrent_row=document.createElement("tr"); 
for(var i = 0; i < 2; i++) { 
mycurrent_cell = document.createElement("td"); 
currenttext = document.createTextNode("单元格是:" + i + j); 
mycurrent_cell.appendChild(currenttext); 
mycurrent_row.appendChild(mycurrent_cell); 
// 如果在第0列设置单元格背景色 
// 如果在第1列隐藏单元格 
if (i == 0) { 
mycurrent_cell.style.background = "rgb(255,0,0)"; 
} else { 
mycurrent_cell.style.display = "none"; 
} 
} 
mytablebody.appendChild(mycurrent_row); 
} 
mytable.appendChild(mytablebody); 
mybody.appendChild(mytable); 
} 
</script> 
</html>
Javascript 相关文章推荐
High Performance JavaScript(高性能JavaScript)读书笔记分析
May 05 Javascript
jQuery实现的网页左侧在线客服效果代码
Oct 23 Javascript
浅谈Javascript数据属性与访问器属性
Jul 26 Javascript
JQuery实现图片轮播效果
May 08 jQuery
JavaScript上传文件时不用刷新页面方法总结(推荐)
Aug 15 Javascript
AngularJS 表单验证手机号的实例(非必填)
Nov 12 Javascript
React Native 使用Fetch发送网络请求的示例代码
Dec 02 Javascript
Vue实现动态创建和删除数据的方法
Mar 17 Javascript
vue 本地环境跨域请求proxyTable的方法
Sep 19 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
Nov 15 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
Apr 26 Javascript
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
JavaScript执行效率与性能提升方案
Dec 21 #Javascript
JS实现图片预加载无需等待
Dec 21 #Javascript
Javascript根据指定下标或对象删除数组元素
Dec 21 #Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
Dec 21 #Javascript
js返回上一页并刷新代码整理
Dec 21 #Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
Dec 21 #Javascript
JS弹出窗口代码大全(详细整理)
Dec 21 #Javascript
You might like
用PHP 快速生成 Flash 动画的方法
2007/03/06 PHP
从康盛产品(discuz)提取出来的模板类
2011/06/28 PHP
PHP 实现explort() 功能的详解
2013/06/20 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(八)
2014/06/23 PHP
PHP实现可精确验证身份证号码的工具类示例
2018/05/31 PHP
PHP设计模式(五)适配器模式Adapter实例详解【结构型】
2020/05/02 PHP
一个无限级XML绑定跨框架菜单(For IE)
2007/01/27 Javascript
两个DIV等高的JS的实现代码
2007/12/23 Javascript
jquery lazyload延迟加载技术的实现原理分析
2011/01/24 Javascript
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
2011/02/26 Javascript
原生js实现半透明遮罩层效果具体代码
2013/06/06 Javascript
jQuery中的jQuery()方法用法分析
2014/12/27 Javascript
jquery实现不包含当前项的选择器实例
2015/06/25 Javascript
详解Javascript中的Object对象
2016/02/28 Javascript
JavaScript学习笔记之数组去重
2016/03/23 Javascript
html+js实现简单的计算器代码(加减乘除)
2016/07/12 Javascript
详解js实现线段交点的三种算法
2016/08/09 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
2017/10/31 Javascript
ng-zorro-antd 入门初体验
2018/12/03 Javascript
vue不操作dom实现图片轮播的示例代码
2019/12/18 Javascript
JS实现横向轮播图(中级版)
2020/01/18 Javascript
Python threading多线程编程实例
2014/09/18 Python
python 通过logging写入日志到文件和控制台的实例
2018/04/28 Python
Python判断两个list是否是父子集关系的实例
2018/05/04 Python
利用Python如何实现数据驱动的接口自动化测试
2018/05/11 Python
Python不使用int()函数把字符串转换为数字的方法
2018/07/09 Python
使用Python 正则匹配两个特定字符之间的字符方法
2018/12/24 Python
对python 多线程中的守护线程与join的用法详解
2019/02/18 Python
使用ITK-SNAP进行抠图操作并保存mask的实例
2020/07/01 Python
说一下mysql, oracle等常见数据库的分页实现方案
2012/09/29 面试题
彩色的非洲教学反思
2014/02/18 职场文书
党组织公开承诺书
2014/03/29 职场文书
赢在中国观后感
2015/06/02 职场文书
医务人员岗前培训心得体会
2016/01/08 职场文书
幼儿园科学课教学反思
2016/03/03 职场文书
浅谈Python协程asyncio
2021/06/20 Python