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

最新推荐文章于 2020-06-27 00:28:19 发布

life is wonderful

最新推荐文章于 2020-06-27 00:28:19 发布

阅读量2.3k

点赞数 6

分类专栏： JavaScript DOM编程学习文章标签： Javascript DOM编程 Web前端开发 DOM

本文链接：https://blog.csdn.net/erlian1992/article/details/50374219

版权

JavaScript 同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

DOM编程学习

12 篇文章 7 订阅

订阅专栏

一使用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标签在一个表格中只能有一个

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

二使用DOM创建表格

<span style="font-size:18px;">window.οnlοad=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.οnlοad=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，以及更多的应用。