本内容是《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); // 4sectionRowIndex属性：返回该行在所属部分（如<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); // 1cells：返回某个行中的所有单元格的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");按列重新排序：
可以点击每列的顶部标签来重排输出的表格；