木灵鱼儿

木灵鱼儿

阅读:493

最后更新:2018/09/06/ 3:21:01

DOM操作表格及样式(上)

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

首先我们要先知道一点:

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


table对应的属性和方法:

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

tbody的属性和方法:

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

tr的属性和方法:

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

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中第一行的第一个单元格

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 0
文章被阅读 493

相关文章