记录下关于操作table相关的函数

介绍

在我们web开发过程中经常会碰到针对table的一些dom操作，这里整理一下关于这方面的知识点。当然我们可以通过jquery这样的插件来处理，或许会更简单一些，不过现在简单说下原生JS是如何操作的。

针对原生JS

主要有以下操作：

1.创建Table 2.创建row 3.创建cell 4.删除cell、row、table 5.美化table

创建table

var tableObject = document.getElementById('tableId');//获取表格对象，也可以通过createElement来进行创建
//var tableObject = document.createElement('TABLE');
//document.body.appendChild(tableObject);
//前提是，要将js放在dom加载完毕后执行，不然是会报错的。

创建row

var row = tableObject.insertRow(0);
//通过insertRow 方法创建一行，传递index参数，index表示创建第几行，
//0 表示第一行，同时返回一个已经创建的行对象，如果index 小于 0 或 大于表格
//中的行数，则会抛出 INDEX_SIZE_ERR 异常

创建cell

var cell = row.insertCell(0);
//这里的insertCell 几乎等同于insertRow ，不过一个是创建行，一个是创建列。
//同样会返回一个TableCell对象。

删除cell、row、 table

//删除列，通过行对象调用deleteCell方法
row.deleteCell(0);//index 参数为删除第几列
//删除行，通过table对象调用deleteRow 方法
tableObject.deleteRow(0);//index 参数为删除第几行
//删除table
tableObject.remove();//移除自身
document.body.removeChild(tableObject);//通过document移除子节点table

美化table

1.行列合并 2.样式的修改 3.属性的设置

//行列合并，属性为 rowSpan colSpan
cell.colSpan = 3;cell.rowSpan = 2;
//该单元格会合并3列，2行
//样式修改可以直接通过style进行修改
cell.style.color = 'red';//字体颜色为红色..等等,具体可以查看style对象。
//属性设置
cell.setAttribute('name','test');