HTML DOM TableData 对象

// 获取表格行
let row = document.getElementById("myRow");

// 在指定位置插入新单元格
let newCell = row.insertCell(2);  // 在第三列位置插入
newCell.textContent = "新内容";

// 删除指定位置的单元格
row.deleteCell(0);  // 删除第一列

// 遍历行中的所有单元格
for (let i = 0; i < row.cells.length; i++) {
console.log("单元格 " + i + ": " + row.cells[i].textContent);
}

// 动态操作表格单元格的完整示例
function addRowToTable() {
let table = document.getElementById("myTable");
let newRow = table.insertRow();

// 添加单元格
let cell1 = newRow.insertCell(0);
let cell2 = newRow.insertCell(1);
let cell3 = newRow.insertCell(2);

cell1.textContent = "新行";
cell2.textContent = "数据";
cell3.innerHTML = '<button onclick="deleteRow(this)">删除</button>';
}

function deleteRow(button) {
let row = button.parentNode.parentNode;
row.parentNode.removeChild(row);
}

// 获取单元格元素
let cell = document.getElementById("myCell");

// 属性操作
cell.setAttribute('data-id', '123');
let id = cell.getAttribute('data-id');
cell.removeAttribute('data-id');
let hasAttr = cell.hasAttribute('colspan');

// 内容操作
cell.insertAdjacentHTML('beforeend', '<strong>重要内容</strong>');
cell.insertAdjacentText('beforeend', '普通文本');

// 事件处理
function handleClick(event) {
console.log('单元格被点击了');
}
cell.addEventListener('click', handleClick);

// 类操作
cell.classList.add('highlight', 'active');
cell.classList.remove('active');
cell.classList.toggle('selected');
let hasClass = cell.classList.contains('highlight');

// 样式操作
cell.style.backgroundColor = 'yellow';
cell.style.fontWeight = 'bold';

// 获取单元格元素
let cell = document.getElementById("myCell");

// 访问专用属性
cell.abbr;              // 获取或设置abbr属性
cell.align;             // 获取或设置align属性 (已废弃)
cell.axis;              // 获取或设置axis属性
cell.background;        // 获取或设置background属性 (已废弃)
cell.bgColor;           // 获取或设置bgColor属性 (已废弃)
cell.cellIndex;         // 获取单元格在行中的索引 (只读)
cell.ch;                // 获取或设置ch属性
cell.chOff;             // 获取或设置chOff属性
cell.colSpan;           // 获取或设置colSpan属性
cell.headers;           // 获取或设置headers属性
cell.height;            // 获取或设置height属性 (已废弃)
cell.noWrap;            // 获取或设置noWrap属性 (已废弃)
cell.rowSpan;           // 获取或设置rowSpan属性
cell.scope;             // 获取或设置scope属性 (仅th)
cell.vAlign;            // 获取或设置vAlign属性
cell.width;             // 获取或设置width属性 (已废弃)

// 通用属性
cell.id;                // 获取或设置id
cell.className;         // 获取或设置class
cell.style;             // 获取样式对象
cell.title;             // 获取或设置title
cell.dataset;           // 获取data-*属性集合
cell.innerHTML;         // 获取或设置HTML内容
cell.textContent;       // 获取或设置文本内容
cell.innerText;         // 获取或设置可见文本