编程技术是改变世界的力量。
本站
当前位置:网站首页 > HTML/CSS > 正文

第48节 表格HTMLTableElement API-王唯

gowuye 2023-10-11 13:03 16 浏览 0 评论

本内容是《Web前端开发之Javascript视频》的课件,请配合大师哥《Javascript》视频课程学习。

为了方便构建表格,HTML DOM为表格专门创建了HTMLTableElement 接口;其继承自HTMLElement接口;

该接口提供了专门的属性和方法来处理表格的布局与呈现;

HTMLTableElement接口属性:

  • caption:返回HTMLTableCaptionElement类型的<caption>元素;
  • tHead:指向一个HTMLTableSectionElement类型的<thead>;
  • tBodies:是一个保存着<tbody>元素的HTMLCollection对象,该对象的length属性返回了<tbody>元素的数量;
  • tFoot:指向一个HTMLTableSectionElement类型的<tfoot>元素;
  • rows:返回一个表格中所有行的HTMLCollection,也就是所有的<tr>,包含在<thead>、<tbody>和<tfoot>三者之中,该属性是只读的;
var table = document.getElementsByTagName("table")[0];
console.log(table.caption);
console.log(table.tHead);
console.log(table.tBodies);
console.log(table.tFoot);
console.log(table.rows);
console.log(table.rows[0]);
console.log(table.rows[table.rows.length-1]);

另外,HTMLTableElement对象还拥有一些表现性的属性,但这些属性已建议不被使用,因为可以使用CSS来指定样式,如;

  • width:表格宽度,值可以是像素也可以是百分比;注意,此宽不会返回CSS指定的宽,它只映射<table>标签中的width特性;
  • border:边框宽度,其以像素为单位;
  • align:表格的对齐方式,可能的值为”left”、”center”和”right”;
  • bgColor:背景颜色,该属性也可以应用在tbody、row和cell对象上;
  • cellPadding:单元格内边距;
  • cellSpacing:单元格间距;
  • summary:表描述;
  • frame:表格外边框位置,可能的值为:void无边、above顶部、below底部、hsides顶部和底部、vsides右侧和左侧、lhs左侧、rhs右侧、box四个边、border四个边;
  • rules:表中如何呈现单元格边框,可能的值为:none没有、groups组之间的线、rows行之间的线、cols列之间的线、all所有单元格之间的线;

以上属性除了summary,都可以使用CSS进行定义,所以尽量不要再使用;

HTMLTableElement接口方法:

createCaption():返回表格元素的标题,如该表没有标题,这个方法创建并返回标题,随后可以使用其他方法对其添加内容;

deleteCaption():移除表格元素的<caption>;

var table = document.getElementsByTagName("table")[0];
// 也可以创建一个,并添加到DOM树中
var table = document.createElement("table");
document.body.appendChild(table);
var caption = table.createCaption();
caption.innerHTML = "Web前端开发课程";
table.deleteCaption();

createTHead():返回表元素的tHead对象,如果表元素中没有<thead>,则创建并返回;注意:如果不存在<thead>,该方法创建<thead>并直接插入表中;

deleteTHead():移除表元素中的<thead>;

var thead = table.createTHead();  // 如果不存在,则创建
console.log(thead);
var row = thead.insertRow(0);
row.insertCell(0);
row.insertCell(1);
row.insertCell(2);
table.deleteTHead();

createTFoot():返回表元素的tHead对象,如果表元素中没有<thead>,则创建并返回;

deleteTFoot():移除表元素中的<tfoot>;

var tfoot = table.createTFoot();
console.log(tfoot);
var row = tfoot.insertRow(0);
row.insertCell(0);
row.insertCell(1);
row.insertCell(2);
table.deleteTFoot();

createTBody()方法:创建并返回表元素的<tbody>;

注意:与createTHead()、createTFoot()方法的不同的是,createTBody()可以创建多个<tbody>元素,新创建的<tbody>在最后位置;

新创建的<tbody>元素会被保存到tBodies集合中;

var tbody = table.createTBody();
console.log(tbody);
var row = tbody.insertRow(0);
row.insertCell(0);
row.insertCell(1);
row.insertCell(2);
console.log(table.tBodies);

insertRow(index):向rows集合中在指定位置插入行;即在表元素中index位置插入新行<tr>,并返回对该新行的类型为HTMLTableRowElement对象;

table及tbody都可以调用该方法;

如果一个表有多个<tbody>元素,默认情况下,新行将插入到最后的<tbody>;

var row = table.insertRow(0);  // 第一行
console.log(row);
table.insertRow();  // 最后一行
table.insertRow(-1);  // 最后一行
table.insertRow(table.rows.length);  // 最后一行
// 如果存在第二个<body>,并且指定的index=4位于该<body>中,则在此处添加
table.insertRow(4);  
console.log(table.rows);

要将行插入特定的<tbody>,先取得该<tbody>对象,再使用该对象执行insertRow()方法;但index不能超过此<tbody>的索引下界;

var tbody = table.tBodies[0];
tbody.insertRow();  // 在第一个<body>的最后添加新行
tbody.insertRow(table.rows.length); // 异常 
deleteRow(index):删除指定位置的行;如果 index 值为 -1,最后一行会被移除;
table.deleteRow(1);
var tbody = table.tBodies[1];
tbody.deleteRow(1);

HTMLTableRowElement接口对象:

该类型表示表格中的一行(<tr>),它定义了若干操作当前行的属性和方法;

rowIndex属性:返回该行在整个表中的逻辑位置,即索引,如果该行不属于表,则返回-1;

var row = table.rows[1];
console.log(row.rowIndex);  // 1
var tbody = table.tBodies[1];
var row = tbody.rows[1];
console.log(row.rowIndex);  // 4

sectionRowIndex属性:返回该行在所属部分(如<thead>、<tbody>和<tfoot>部分)中的逻辑位置,如果该行不属于某部分,则返回-1;

var row = table.rows[1];
console.log(row.sectionRowIndex);  // 1
var tbody = table.tBodies[1];
var row = tbody.rows[1];
console.log(row.sectionRowIndex);  // 1

cells:返回某个行中的所有单元格的HTMLCollection集合;该集合中保存着类型为HTMLTableCellElement的cell对象;

var row = table.rows[1];
console.log(row.cells);  // HTMLCollection
console.log(row.cells[0]);

insertCell(index):向cells集合中的指定位置插入一个单元格,即在<tr>的index位置插入<td>,返回对新插入单元格的引用;如果index值为空或者为-1或者等于当前行中单元格的数目,则新的单元格将被追加到当前行的最后;

插入的新Cell对象,可以使用其他DOM方法添加子元素或内容;

var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
cell1.appendChild(document.createTextNode("4"));
var cell2 = row.insertCell(1);
cell2.innerHTML = "Web开发";

该方法不能创建<th>元素,如果需要创建<th>,必须使用document.createElement()方法及Node.insertBefore()或相关的方法来创建和插入<th>元素;

deleteCell(index):删除行中给定位置的单元格;

row.deleteCell(0);

HTMLTableCellElement接口:

表示表元素中的单元格,包括<th>及<td>元素;其继承自HTMLElement接口;

  • cellIndex属性:只读,返回该单元格在cells集合中的位置;
  • colSpan属性:单元格跨越的列数;
  • rowSpan属性:单元格跨越的行数;
var row = table.insertRow();
var cell = row.insertCell();
cell.innerHTML = "Web前端开发";
console.log(cell.cellIndex); // 0
cell.colSpan = "3";  // 跨3列
var cell = table.rows[1].cells[1];
cell.rowSpan = 2;  // 跨行
table.rows[2].deleteCell(2);

使用这些属性和方法,可以极大地减少创建表格所需的代码量,如:

var table = document.createElement("table");
table.border = "1";
table.width = "600px";
var caption = table.createCaption();
caption.innerHTML = "Web前端开发课程";
var thead = table.createTHead();
var row = thead.insertRow();
var th1 = document.createElement("th");
th1.appendChild(document.createTextNode("序号"));
row.appendChild(th1);
var th2 = document.createElement("th");
th2.appendChild(document.createTextNode("课程"));
row.appendChild(th2);
var tbody = table.createTBody();
tbody.insertRow();
tbody.rows[0].insertCell();
tbody.rows[0].cells[0].appendChild(document.createTextNode("1"));
tbody.rows[0].insertCell();
tbody.rows[0].cells[1].appendChild(document.createTextNode("HTML"));
tbody.insertRow();
tbody.rows[1].insertCell();
tbody.rows[1].cells[0].appendChild(document.createTextNode("2"));
tbody.rows[1].insertCell();
tbody.rows[1].cells[1].appendChild(document.createTextNode("CSS"));
var tfoot = table.createTFoot();
tfoot.insertRow();
var cell = tfoot.rows[0].insertCell();
cell.colSpan = 2;
cell.align = "right";
cell.innerHTML = "由大师哥王唯主讲";
document.body.appendChild(table);

生成简单的空表格:

<style>
#mytable{width: 400px; border: 1px solid lightgreen;}
#mytable td{padding: .5em; border: 1px solid lightgreen;}
</style>
<script>
function MyTable(id, caption, rows, cols){
    this.id = id ? id : "table";
    this.caption = caption ? caption : undefined;
    this.rows = rows ? rows : 2;
    this.cols = cols ? cols : 2;
    var table = document.createElement("table");
    table.id = this.id;
    if(this.caption){
        var _caption = table.createCaption();
        _caption.innerText = this.caption;
    }
    for(var i=0; i<this.rows; i++){
        var _rows = table.insertRow();
        for(var j = 0; j < this.cols; j++){
            var _cell = _rows.insertCell();
            _cell.appendChild(document.createTextNode(""));
        }
    }
    return table;
}
var t = new MyTable("mytable","我的表格",4,3);
document.body.appendChild(t);
</script>

控制台表格:

console.table(data [, columns])方法:

将数据以表格的形式显示;这个方法需要一个必须参数data,data必须是一个数组或者是一个对象;

它会把数据data以表格的形式打印出来,数组中的每一个元素(或对象中可枚举的属性)将会以行的形式显示在表格中;

// 打印一个由字符串组成的数组
console.table(["HTML","CSS","Javascript"]);

表格的第一列是index,如果数据data是一个数组,那么这一列的单元格的值就是数组的索引,如果数据是一个对象,那么它们的值就是各对象的属性名称;;

// 打印一个属性值是字符串的对象
function Person(firstName, lastName){
    this.firstName = firstName;
    this.lastName = lastName;
}
var p = new Person("王","唯");
console.table(p);

打印复合的参数类型:

如果需要打印的元素在一个数组中,或者需要打印的属性在一个对象,并且他们本身就是一个数组或者对象,则将会把这个元素显示在同一行,每个元素的成员占一列;

// 二元数组的打印
var people = [["wang","wei"],["jing","jing"],["juan","zi"]];
console.table(people);
// 打印一个包含对象的数组
var wang = new Person("王","唯");
var jing = new Person("静","静");
var juan = new Person("娟","子");
// 如果数组中包含该对象,打印出来的列标签将是该对象的属性名
console.table([wang, jing, juan]);
// 打印属性名是对象的对象
var family = {};
family.mother = jing;
family.father = wang;
family.daughter = juan;
console.table(family);

选择要隐藏的列:

console.table()会把所有元素罗列在每一列,可以使用columns参数选择要显示的列的子集;其是一个包含列的名称的数组;

// 一个对象数组,只打印 firstName
console.table([wang, jing, juan],"firstName");

按列重新排序:

可以点击每列的顶部标签来重排输出的表格;

Web前端开发之Javascript-零点程序员-王唯

相关推荐

python中调试pdb_python怎么调试
python中调试pdb_python怎么调试

当你的Python程序出现错误或行为不符合预期时,调试工具是一种非常有用的方式来帮助你找到问题所在。Python内置了一个强大的调试器模块,称为pdb(Pyth...

2023-10-22 12:21 gowuye

vue3+tsx开发语法详解_vue3+typescript
vue3+tsx开发语法详解_vue3+typescript

很多组件库都使用了TSX的方式开发,主要因为其灵活性比较高,TSX和SFC开发的优缺点就不介绍了,这里主要说一下将SFC项目改造为TSX的过程。安装JSX库pn...

2023-10-22 12:20 gowuye

对前端初学者的一些帮助(常见名词解释)
对前端初学者的一些帮助(常见名词解释)

1.HTML:HTML是超文本标记语言,“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。2.CSS:主要用来设计网页的样式,美化网页;...

2023-10-22 12:20 gowuye

JAVA多线程详解(超详细)_java多线程菜鸟教程
JAVA多线程详解(超详细)_java多线程菜鸟教程

一、线程简介1、进程、线程程序:开发写的代码称之为程序。程序就是一堆代码,一组数据和指令集,是一个静态的概念。进程(Process):将程序运行起来,我们称之...

2023-10-22 12:19 gowuye

一文搞懂什么时候用 Runnable?什么时候用 Callable ?

今天我们看一道leetcodehard难度题目:统计可以被K整除的下标对数目。题目给你一个下标从0开始、长度为n的整数数组nums和一个整数k,返回满足下述条件的下标对(i...

优化重复冗余代码的8种方式_优化重复冗余代码的8种方式是什么

日常开发中,我们经常会遇到一些重复代码。大家都知道重复代码不好,它主要有这些缺点:可维护性差、可读性差、增加错误风险等等。最近呢,我优化了一些系统中的重复代码,用了好几种的方式。感觉挺有用的,所以本文...

高级 CSS 和 Sass:Flexbox、网格、动画等等!
高级 CSS 和 Sass:Flexbox、网格、动画等等!

Udemy-高级CSS和Sass:Flexbox、网格、动画等等!讲师:JonasSchmedtmann下载:口袋资源网高级CSS和Sass:...

2023-10-22 12:19 gowuye

我们现在正处于 JavaScript 消亡的边缘?
我们现在正处于 JavaScript 消亡的边缘?

每10年JavaScript都会发生一次改朝换代式的变革。在我看来,JavaScript当前正处于一次快速变革的开始,而这段时期未来可能会被称为Ja...

2023-10-22 12:19 gowuye

CSS预编译器三剑客及PostCSS_前端预编译css有哪几种
CSS预编译器三剑客及PostCSS_前端预编译css有哪几种

这篇文章包含两个部分,第一部分是个CSS预编译器:Sass、Less、Stylus,他们之间的对比,第二部分是现在大火的PostCSS。为什么会出现CSS预编译...

2023-10-22 12:18 gowuye

CSS预处理语言Sass入门_css3预处理器
CSS预处理语言Sass入门_css3预处理器

1.引言CSS3之前的CSS都大都是枚举属性样式,而编程语言强大的变量、函数、循环、分支等功能基本都不能在CSS中使用,让CSS的编程黯淡无光,Sass就是一...

2023-10-22 12:18 gowuye

“金三银四”,让我们愉快的开始准备Web面经吧:CSS篇
“金三银四”,让我们愉快的开始准备Web面经吧:CSS篇

前言又到了一年一度的“金三银四的季节了”。不过恐怕大家都有感觉,当下,正面临着近几年来的最严重的互联网寒冬,因此今天的“金三银四”肯定又是一场更为惨烈的江湖厮杀...

2023-10-22 12:18 gowuye

sass @extend(继承)指令详解_sass内置函数总结

在设计网页的时候常常遇到这种情况:一个元素使用的样式与另一个元素完全相同,但又添加了额外的样式。通常会在HTML中给元素定义两个class,一个通用样式,一个特殊样式。普通CSS的实现接下来以警...

Sass混合的使用_sas中如何合并两组数据

本节我们学习Sass中的混合,Sass中的混合是通过@mixin指令来定义的,混合允许我们定义可以在整个样式表中重复使用的样式,避免使用无语意的类。混合可以包含所有的CSS规则和任何其他...

css代码规范工具stylelint_代码规范

css样式的书写顺序及原理——很重要!很重要!很重要!为什么重要???概括讲就是,它涉及了浏览器的渲染原理:reflow和repaint还想知道更多为什么可以参考:https://blog.csdn....

CSS-in-JS 是恶魔还是天使?_天启四骑士是恶魔还是天使
CSS-in-JS 是恶魔还是天使?_天启四骑士是恶魔还是天使

有些人极为讨厌CSS-in-JS,单单提起这个名字都会让他们反感,总之就是拒绝二字。他们认为样式不属于JavaScript,而是属于CSS,并且CSS...

2023-10-22 12:17 gowuye

取消回复欢迎 发表评论: