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>Tom</td>
13             <td>boy</td>
14             <td>20</td>
15         </tr>
16         <tr>
17             <td>Jack</td>
18             <td>girl</td>
19             <td>19</td>
20         </tr>
21     </tbody>
22     <tfoot>
23         <tr>
24             <td colspan="3">合计：2</td>
25         </tr>
26     </tfoot>
27 </table>

View Code