• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

DOM操作表格及样式(上)

119 0

如果要通过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
  • 本文分类:JavaScript
  • 本文标签:DOM操作表格及样式
  • 流行热度:已超过 119 人围观了本文
  • 最后更新:2018年09月6日 - 3时21分01秒
  • 发布日期:2018年09月6日 - 2时34分00秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
微信收款码
微信收款码