木灵鱼儿
阅读:1892
最后更新: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中第一行的第一个单元格
文章分类
JavaScript
文章标签
DOM操作表格及样式
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。