HTML Table DOM
撰写时间：2025-01-07
修订时间：2025-01-07
HTML表格结构
下面是一个比较简单的HTMLTable标签经解析后的显示效果。
My Table
| Header1 | Header2 |
| Cell1 | Cell2 |
| Cell3 | Cell4 |
| Table Footer |
下面是其对应的HTML代码：
My Table
| Header1 | Header2 |
| Cell1 | Cell2 |
| Cell3 | Cell4 |
| Table Footer |
树形结构
DOM树形结构如下图：
- table
- caption
- thead
- tbody
- tfoot
根据树形结构来编写代码：
let table = document.createElement('table');
(function genTCaption() {
let caption = document.createElement('caption');
caption.innerText = 'My Table';
table.appendChild(caption);
})();
(function genTHead() {
let thead = document.createElement('thead');
let tr = document.createElement('tr');
["Header1", "Header2"]
.forEach(title => {
let th = document.createElement('th');
th.innerText = title;
tr.appendChild(th);
});
thead.appendChild(tr);
table.appendChild(thead);
})();
(function genTBody() {
let tbody = document.createElement('tbody');
let rows = [
["Cell1", "Cell2"],
["Cell3", "Cell4"]
];
rows.forEach(row => {
let tr = document.createElement('tr');
row.forEach(cell => {
let td = document.createElement('td');
td.innerText = cell;
tr.appendChild(td);
});
tbody.appendChild(tr);
});
table.appendChild(tbody);
})();
(function genTFoot() {
let tfoot = document.createElement('tfoot');
let tr = document.createElement('tr');
let td = document.createElement('td');
td.setAttribute('colspan', "2");
td.innerText = 'Table Footer';
tr.appendChild(td);
tfoot.appendChild(tr);
table.appendChild(tfoot);
})();
pc.log('%o', table);
HTMLTableElement
表格的类型为HTMLTableElement，其原型如下：
let table = document.getElementById('table-1');
pc.log('%O', table);
从上面的原型可看出，HTMLTableElement有一些独特的属性和方法，在遍历其DOM或手工创建该标签的代码时比较有用。
createCaption方法
let table = document.getElementById('table-1').cloneNode(true);
let caption = table.createCaption();
caption.innerText = 'A Custom Caption';
pc.appendHTMLStr(table.outerHTML);
与其从头到尾重新编写创建一个HTMLTableElement的代码，上面代码加载了一个页面中已有的实例，克隆后添加到页面中。
除了使用table的caption方法来返回caption标签外，也可以调用其createCaption方法。
createCaption方法用以创建表格标题，该方法没有参数。因此我们得自己添加其标题内容。
如果表格中已有标题，则createCaption返回该标题；如果没有，则创建一个新标题，且将该标签自动添加进table的DOM结构中后再返回。
HTMLTableSectionElement
table的tHead属性值为一个HTMLTableSectionElement对象。
let table = document.getElementById('table-1');
pc.log('%O', table.tHead);
在其各个属性中，align及vAlign属性已被废弃，应使用CSS来编排水平及竖直的位置。同样，ch及chOff也均已被废弃。
其他属性及方法主要用以管理行。
rows属性：各行集合
tHead的rows属性值为一个HTMLCollection对象，可用它来遍历该标签下面的各行。
let tableStr = `
| row 1 | Header1 | Header2 |
|---|
| row 2 | Header3 | Header4 |
|---|
`;
pc.appendHTMLStr(tableStr);
let tableElement = pc.consoleUL.querySelector('table');
let rows = tableElement.tHead.rows;
pc.log('%O', rows);
for (let i = 0; i < rows.length; i++) {
let row = rows.item(i); // or let row = rows[i];
pc.log('%O', row);
pc.log(row.sectionRowIndex);
}
每一行都是HTMLTableRowElement对象，其sectionRowIndex属性值表示该行在其父标签HTMLTableSectionElement中是第几个子元素。
cells属性：各单元格集合
let tableStr = `
| row 1 | Header1 | Header2 |
|---|
| row 2 | Header3 | Header4 |
|---|
`;
pc.appendHTMLStr(tableStr);
let tableElement = pc.consoleUL.querySelector('table');
let rows = tableElement.tHead.rows;
for (let i = 0; i < rows.length; i++) {
let row = rows[i];
let cells = row.cells;
for (let j = 0; j < cells.length; j++) {
let cell = cells[j];
pc.log('%O', cell);
pc.log(cell.innerText);
}
}
每个单元格都是HTMLTableCellElement对象，继承于HTMLElement对象，因此我们可以通过调用其innerText属性值来快速地取出各个单元格的文本。
插入行与单元格
let tableStr = `
`;
pc.appendHTMLStr(tableStr);
let tableElement = pc.consoleUL.querySelector('table');
let tHead = tableElement.tHead;
let newRow = tHead.insertRow();
let cell1 = newRow.insertCell();
cell1.textContent = 'row 2';
let cell2 = newRow.insertCell();
cell2.textContent = 'Header3';
let cell3 = newRow.insertCell();
cell3.textContent = 'Header4';
注意到insertCell方法只能插入一个td标签，而不能插入一个th标签。
tBodies属性
由于在一个表格中可以同时存在多个tbody，因此tBodies属性值是一个HTMLCollection对象，用于存储HTMLTableSectionElement的集合。
let table = document.getElementById('table-1');
pc.log('%O', table.tBodies);
tFoot属性
tFoot属性与tHead属性一样，他们的类型均为HTMLTableSectionElement。
let table = document.getElementById('table-1');
pc.log('%O', table.tFoot);
小结
在遍历时，使用相应的属性比较方便。
let table = document.getElementById('table-1');
let caption = table.caption;
pc.log(caption.textContent);
{
pc.group("tHead");
let tHead = table.tHead;
let rows = tHead.rows;
for (let i = 0; i < rows.length; i++) {
let row = rows[i];
let cells = row.cells;
for (let j = 0; j < cells.length; j++) {
let cell = cells[j];
pc.log(cell.textContent);
}
}
pc.groupEnd();
}
{
pc.group("tBodies");
let tBody = table.tBodies[0];
let rows = tBody.rows;
for (let i = 0; i < rows.length; i++) {
let row = rows[i];
let cells = row.cells;
for (let j = 0; j < cells.length; j++) {
let cell = cells[j];
pc.log(cell.textContent);
}
}
pc.groupEnd();
}
{
pc.group("tFoot");
let tFoot = table.tFoot;
let rows = tFoot.rows;
for (let i = 0; i < rows.length; i++) {
let row = rows[i];
let cells = row.cells;
for (let j = 0; j < cells.length; j++) {
let cell = cells[j];
pc.log(cell.textContent);
}
}
pc.groupEnd();
}
而在创建HTMLTableElement时，直接操作文本比较方便。
let tableStr = `
My Table
| Header1 | Header2 |
|---|
| Cell1 | Cell2 |
| Cell3 | Cell4 |
| Table Footer |
`;
pc.appendHTMLStr(tableStr);
