DOM操作表格及样式（上）

如果要通过js去创建表格元素并添加一定的内容，可以说会让人头疼死，因为你每个元素和内容都需要一个个的去创建去插入，估计写十行表格的代码就可以让你崩溃，每个tr，td都需要documen.createElement('')来创建，还有caption、thead、tbody、tfoot还有内容，于是乎便有了专门应对表格的一些属性和方法，我们一一来介绍下！

首先我们要先知道一点：

table、th、tbody这三个是没有可以直接创建的对应属性和方法，只能通过documen.createElement('')来创建，不过好在这三个元素重复率不是很多。

---

table对应的属性和方法：

元素的集合，本身是一个数组元素的引用元素的引用元素，并引用元素，并引用元素元素

元素的引用

元素，并引用

元素

属性或方法	说明
caption	保存着
tBodies	保存着
tFoot	保存着
tHead	保存着
rows	保存着\ 元素的集合，本身是一个数组
createTHead()	创建一个
createTFoot()	创建一个
createCaption()	创建一个
deleteTHeda()	删除
deleteTFoot()	删除
deleteCaption()	删除
deleteRow(x)	删除指定的\ 集合位置的一行
insertRow(x)	在指定的\ 集合位置中插入一行

---

tbody的属性和方法：

属性或方法	说明
rows	保存着\ 元素的集合，本身是一个数组
deleteRow(x)	删除指定的\ 集合位置的一行
insertRow(x)	在指定的\ 集合位置中插入一行

---

tr的属性和方法：

属性或方法	说明
cells	保存着\	元素的集合，本身是一个数组
deleteCell(x)	删除指定的\集合位置的一个单元格
insertCell(x)	在指定的\集合位置中插入一个单元格

---

table、th、tbody这三个只能通过document创建：

var table = document.createElement('table');
var th = document.createElement('th');
var tbody = document.createElement('tbody');

---

table.caption;       //获取表格的标题引用
table.tBodies;       //获取表格的tbody集合
table.tHead;        //获取表格的表头引用
table.tFoot;         //获取表格的表尾引用
table.createCaption().innerHTML = '这是一个表格的标题';     //创建一个表格的标题并赋值
var thead = table.createThead();                          //创建一个表头
table.appentChild(tbody);                                 //将变量tbody传入table中
var tfoot = table.createTFoot();                          //创建一个表尾
alert(table.rows.length);                                 //获取table表格里的总行数（标题不算一行）
alert(table.tBodies[0].rows.length);                      //获取表格的第一个tbody中的总行数                
alert(table.tBodies[0].rows[0].cells.length);             //获取表格里的第一个tbody的第一行中的单元格数量
alert(table.tBodies[0].rows[0].cells[0].innerHTML);       //输出表格里的第一个tbody的第一行第一个单元格内容
table.tBodies[0].rows[0].cells[1].innerHTML = '通过innerHTML赋值';    
table.deleteCaption();                                     //删除表格标题
table.deleteTHeda();                                       //删除表头
table.deleteTFoot();                                       //删除表尾
table.tBodies[0].deleteRow(0);                             //删除表格里第一个tbody中的第一行
table.tBodies[0].rows[0].deleteCell(0);                    //删除表格里第一个tbody中第一行的第一个单元格