正在加载中

最后更新于 2018年09月06日

如果要通过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中第一行的第一个单元格
  • weixiao kaixin tushetou jingkong deyi fanu liezui liuhan daku ganga bishi nanguo lihai qian yiwen numu tu yi haixiu se fadai minyan hehe henkaixin huaji biyiyan kuanghan maimeng shui xiaku penqi zhangzui pen aini ye niu laji ok chigua renshi kongbu shuai xiaoxiese touxiao huaixiao jingnu chihuai kaisang xiaoku koubi zhuangbi lianhong kanbujian shafa zhijing xiangjiao dabian yaowan redjing lazhu rizhi duocang chixigua hejiu xixi xiaopen goukun xiaobuchu shenme wusuowei guancha lajing chouyan xiaochi bie zhadanzui zhadanxiao