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

标签：

       一使用HTML标签创建表格：

<span style="font-size:18px;"><table border="1px"width="300px">
       <caption>人员表</caption>
       <thead>
             <tr>
                 <th>姓名</th>
                 <th>性别</th>
                 <th>年龄</th>
             </tr>
       </thead>
       <tbody>
             <tr>
                 <td>张三</td>
                 <td>男</td>
                 <td>20</td>
             </tr>
             <tr>
                 <td>李四</td>
                 <td>女</td>
                 <td>22</td>
             </tr>
       </tbody>
       <tfoot>
             <tr>
                <td colspan="3">合计：N</td>
             </tr>
       </tfoot>
</table></span>

        运行结果：

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

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

        二使用DOM创建表格

<span style="font-size:18px;">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";
};</span>

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

释，我们并不推荐使用。

       三使用HTML DOM创建表格

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

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

      <tbody>元素添加的属性和方法

      <tr>元素添加的属性和方法

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

<span style="font-size:18px;">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";
};</span>

       需要注意的是：在创建表格的时候，<table>标签，<tbody>标签和<th>标签没有特定的方法，需要使用DOM中的

方法来创建。

       四使用DOM获取表格数据

<span style="font-size:18px;">//由于在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);//返回：姓名</span>

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

DOM来获取表格数据的。

       五使用HTML DOM获取表格数据

<span style="font-size:18px;">//使用HTMLDOM来获取表格元素
var table=document.getElementsByTagName("table")[0];
//按HTM LDOM来获取表格的<caption>
alert(table.caption.innerHTML);//返回：人员表
alert(table.tHead);//获取表头
alert(table.tHead.rows[0].cells[0].innerHTML);//返回：姓名
//按HTML DOM来获取表体<tbody>
alert(table.tBodies.length);//返回：1
alert(table.tBodies[0].rows[0].cells[0].innerHTML);//返回：张三</span>

        在一个表格中<thead>标签和<tfoot>标签是唯一的，只能有一个。而<tbody>标签不是唯一的可以有多个，这样

导致最后返回的<thead>标签和<tfoot>标签是元素引用，而<tbody>标签返回的是元素集合。当然我们也可以使用

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 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时

也可以创建新的元素。

联系：

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

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

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

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

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

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

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

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

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

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

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

标签：

原文地址：http://blog.csdn.net/erlian1992/article/details/50374219