轻松学习JavaScript二十三:DOM编程学习之操作表格

页面导航:首页 > 网络编程 > JavaScript > 轻松学习JavaScript二十三:DOM编程学习之操作表格

轻松学习JavaScript二十三:DOM编程学习之操作表格

来源: 作者: 时间:2016-01-19 18:32 【

一使用HTML标签创建表: 代码: 人员表 姓名

一使用HTML标签创建表格:

代码:

人员表
姓名 性别 年龄
张三 20
李四 22
合计:N

运行结果:

\

不管使用何种方式创建表格,需要注意的是:

(1)caption标签,thead标签,tfoot标签在一个表格中只能有一个

(2)tbody标签,tr标签,th标签,td标签在一个表格中可以有N个

二使用DOM创建表格

window.onload=function() {
     var table=document.createElement("table");
     document.body.appendChild(table);
     //给表格添加属性
     table.width=300;
     table.border=1;
     //创建表格的标题
     var caption=document.createElement("caption");
     table.appendChild(caption);
     //给表格的标题添加内容
     caption.innerHTML="人员表";//非W3c标准的方法
     //创建表格的第一行,是个标题行
     var thead=document.createElement("thead");
     table.appendChild(thead);
     var tr1=document.createElement("tr");
     thead.appendChild(tr1);
     //创建列
     var th1=document.createElement("th");
     tr1.appendChild(th1);
     th1.innerHTML="姓名";
     var th2=document.createElement("th");
     tr1.appendChild(th2);
     th2.innerHTML="性别";
     var th3=document.createElement("th");
     tr1.appendChild(th3);
     th3.innerHTML="年龄";
     //创建表格的第二行,是个内容行
     var tbody=document.createElement("tbody");
     table.appendChild(tbody);
     var tr2=document.createElement("tr");
     tbody.appendChild(tr2);
     //创建列
     var td1=document.createElement("td");
     tr2.appendChild(td1);
     td1.innerHTML="张三";
     var td2=document.createElement("td");
     tr2.appendChild(td2);
     td2.innerHTML="男";
     var td3=document.createElement("td");
     tr2.appendChild(td3);
     td3.innerHTML="20";
     //创建表格的第三行,是个内容行
     var tr3=document.createElement("tr");
     tbody.appendChild(tr3);
     //创建列
     var td4=document.createElement("td");
     tr3.appendChild(td4);
     td4.innerHTML="张三";
     var td5=document.createElement("td");
     tr3.appendChild(td5);
     td5.innerHTML="男";
     var td6=document.createElement("td");
     tr3.appendChild(td6);
     td6.innerHTML="20";
};

是不是发现使用DOM来创建一个表格很繁琐,需要创建的标签和添加的内容很多,这样会造成大量的代码和注

释,我们并不推荐使用。

三使用HTML DOM创建表格

为了解决上述使用DOM创建表格繁琐的问题,我们再使用HTML DOM来创建相同的表格。

HTML DOM提供元素标签的属性和方法

\

\

元素添加的属性和方法

\

元素添加的属性和方法

\

那么我们就来创建相同的表格:

window.onload=function() {
     //按HTML DOM创建一个表格
     var table=document.createElement("table");
     document.body.appendChild(table);
     table.border=1;
     table.width=300;
      //使用createCaption()创建表格标题
     table.createCaption().innerHTML="人员表";
     //使用createTHead()创建标题行
     var thead=table.createTHead();//该方法返回一个引用
     var tr1=thead.insertRow(0);
     //创建列
     var th1=document.createElement("th");
     tr1.appendChild(th1);
     th1.innerHTML="姓名";
     var th2=document.createElement("th");
     tr1.appendChild(th2);
     th2.innerHTML="性别";
     var th3=document.createElement("th");
     tr1.appendChild(th3);
     th3.innerHTML="年龄";
     //创建第二行内容
     var tbody=document.createElement("tbody");
     table.appendChild(tbody);
     var tr2=tbody.insertRow(0);//该方法返回一个引用
     var td1=tr2.insertCell(0);
     td1.innerHTML="张三";
     var td2=tr2.insertCell(1);
     td2.innerHTML="男";
     var td3=tr2.insertCell(2);
     td3.innerHTML="20";
     //创建第二行内容
     var tr3=tbody.insertRow(1);//该方法返回一个引用
     var td4=tr3.insertCell(0);
     td4.innerHTML="李四";
     var td5=tr3.insertCell(1);
     td5.innerHTML="女";
     var td6=tr3.insertCell(2);
     td6.innerHTML="22";
};

需要注意的是:在创建表格的时候,

标签,标签和 alert(table.tBodies.length);//返回:1 alert(table.tBodies[0].rows[0].cells[0].innerHTML);//返回:张三

在一个表格中

标签和标签是唯一的,只能有一个。而标签不是唯一的可以有多个,这样

导致最后返回的

标签和标签是元素引用,而标签返回的是元素集合。当然我们也可以使用

HTML DOM操作表格数据,比如设置数据值和删除单元格数据等,这样的就不再一一叙述,可以自行尝试。

DOM和HTML DOM创建表格以及获取表格数据比较繁琐,但是在实际应用中如果用到了,我们可以正确的使用简

单的方法实现,不要过多的增加代码量,造成JS代码的数量。

还有一个问题需要解释:

JavaScript和HTML DOM的区别和联系

=========================================================================

区别:

JavaScript

JavaScript 是因特网上最流行的浏览器脚本语言。很容易使用!你一定会喜欢它的!

JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies,以及更多的应用。

HTML DOM

HTML DOM 是 W3C 标准(是 HTML 文档对象模型的英文缩写,Document Object Model for HTML)。

HTML DOM 定义了用于 HTML 的一系列标准的对象,以及访问和处理 HTML 文档的标准方法。

通过 DOM,可以访问所有的 HTML 元素,连同它们所包含的文本和属性。可以对其中的内容进行修改和删除,同时

也可以创建新的元素。

HTML DOM 独立于平台和语言。它可被任何编程语言诸如 、 和 VBScript 使用。
=========================================================================

联系:

通过 JavaScript,您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。

要改变页面的某个东西,JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口,连同对

HTML 元素进行添加、移动、改变或移除的方法和属性,都是通过文档对象模型来获得的(DOM)。

Javascript主要是利用HTML DOM去获得、改变、创建HTML元素,从而达到美化页面、操作页面元素的目标。因

此,在Javascript中最常见的就是各种各样的HTML DOM元素以及它们各自的属性。除了这些DOM元素外,

Javascript有自己的对象,例如数组。

简单说,可以认为Javascript主要是操纵HTML DOM。两者是不一样的。

Javascript是语言,DOM是可以在各种语言中(不仅js,php也有的)动态修改文档的模型。

=========================================================================

通过网上找看到了这个还是很详细的,但是自己还是没有理解,随着深入,获取会理解吧。

标签没有特定的方法,需要使用DOM中的

 

方法来创建。

四使用DOM获取表格数据

//由于在HTML文档中所取表格是第一个
var table1=document.getElementsByTagName("table")[0];
alert(table1);//返回:object HTMLTableElement
alert(table1.children);//返回:object HTMLCollection
alert(table1.children.length)//返回:4,分别代表的是caption标签,thead标签,tbody标签和tfoot标签
alert(table1.children[1].children[0].children[0].innerHTML);//返回:姓名

我们还是看出使用DOM操作获取表格数据时,层次很多,使用起来依然繁琐,那么我们还是可以使用HTML

DOM来获取表格数据的。

五使用HTML DOM获取表格数据

//使用HTMLDOM来获取表格元素
var table=document.getElementsByTagName("table")[0];
//按HTM LDOM来获取表格的
alert(table.caption.innerHTML);//返回:人员表 alert(table.tHead);//获取表头 alert(table.tHead.rows[0].cells[0].innerHTML);//返回:姓名 //按HTML DOM来获取表体
Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<