JavaScript操作表格及CSS样式

概述

在前端开发中，表格主要用于存储结构化的数据，CSS主要用于修饰DOM元素，如何通过DOM来操作表格及CSS呢？本文主要通过一些简单的小例子，简述DOM对表格和CSS的常见操作方法，仅供学习分享使用，如有不足之处，还请指正。

获取表格及数据

假如当前有一个表格，id为tb01，如下所示：

 1 <table id="tb01" width="300" border="1" cellspacing="2" cellpadding="2">
 2     <caption>人员表caption>
 3     <thead>
 4         <tr>
 5             <td>姓名td>
 6             <td>性别td>
 7             <td>年龄td>
 8         tr>
 9     thead>
10     <tbody>
11         <tr>
12             <td>Tomtd>
13             <td>boytd>
14             <td>20td>
15         tr>
16         <tr>
17             <td>Jacktd>
18             <td>girltd>
19             <td>19td>
20         tr>
21     tbody>
22     <tfoot>
23         <tr>
24             <td colspan="3">合计：2td>
25         tr>
26     tfoot>
27 table>

View Code

获取表格的标题[caption]，表头[thead]，内容[tbody]，表尾[tfoot]，行数[rows]，某一行的列数[cells]等等，如下所示：

 1 var table=document.getElementById('tb01');
 2 alert(table.caption.innerText);//获取标题文本
 3 alert(table.tHead);//获取表头，输出[object HTMLTableSectionElement]
 4 alert(table.tBodies);//获取tbody 输出：[object HTMLCollection]
 5 alert(table.tFoot);//获取表尾，输出[object HTMLTableSectionElement]
 6 
 7 alert(table.rows.length);//得到行数 4行
 8             
 9 alert(table.tBodies[0].rows.length);//获取tbody下有多少行 ，2行
10 alert(table.tBodies[0].rows[0].cells.length);//获取对应行有几列，，3列

获取单元格里面的内容，如下所示：

1 alert(table.tBodies[0].rows[1].cells[1].innerHTML);//获取tody下第二行第二列的内容 输出：girl

如何删除表格中的标题[caption]，表头[thead]，表尾[tfoot]，某行[row]，某个单元格[cell]，等内容，如下所示：

1 table.deleteCaption();//删除标题            
2 table.deleteTHead();//删除表头
3 table.deleteTFoot();//删除表尾
4 table.tBodies[0].deleteRow(0);//删除tbody第0行
5 table.tBodies[0].rows[0].deleteCell(1);//删除tbody第0行的第1列，右侧单元格前移

创建表格及填充数据

从0创建一个新的表格并显示在页面上，步骤如下：

1. 通过createElement('table')创建table元素
2. 通过table.createCaption()创建标题
3. 通过table.createTHead()创建表头
4. 通过table.createTBody()窗体tbody
5. 通过tbody.insertRow(0)插入新行，并返回行对象。
6. 通过insertCell(0)创建单元格
7. 通过document.body.appendChild(table);将table插入到body中

 1 var table=document.createElement('table');
 2 table.border=1;
 3 table.width=300;
 4 table.createCaption().innerHTML='人员表2';
 5 var thead = table.createTHead();
 6 var tr = thead.insertRow();
 7 tr.insertCell(0).innerHTML='Name';
 8 tr.insertCell(1).innerHTML='Sexy';
 9 tr.insertCell(2).innerHTML='Age';
10 var tbody=table.createTBody();
11 var tr0 =tbody.insertRow(0);
12 tr0.insertCell(0).innerHTML='Lily';
13 tr0.insertCell(1).innerHTML='girl';
14 tr0.insertCell(2).innerHTML='12';
15 var tr1 =tbody.insertRow(1);
16 tr1.insertCell(0).innerHTML='Lucy';
17 tr1.insertCell(1).innerHTML='girl';
18 tr1.insertCell(2).innerHTML='13';
19 var tfoot=table.createTFoot();
20 var tr3 = tfoot.insertRow();
21 var tc3= tr3.insertCell(0);
22 tc3.innerHTML='合计：2';
23 tc3.colSpan=3;
24 document.body.appendChild(table);//将table插入到body中

CSS样式

CSS有三种：

1. 行内样式，即设置标签的style属性
2. 内联样式，即在