HTML表格如何与JavaScript交互？有哪些常见操作？

// 假设有一个ID为 'myTableBody' 的 tbody 元素
const tableBody = document.getElementById('myTableBody');
function addRow(dataArray) {
const newRow = document.createElement('tr'); // 创建新行
dataArray.forEach(item => {
const newCell = document.createElement('td'); // 为每个数据项创建单元格
newCell.textContent = item; // 设置单元格内容
newRow.appendChild(newCell); // 将单元格添加到行
});
tableBody.appendChild(newRow); // 将行添加到 tbody
}
// 示例：添加一行数据
addRow(['产品A', '120.00', '2023-10-26']);

const table = document.getElementById('myTable'); // 假设是整个table元素
const newRow = table.insertRow(-1); // 在最后添加一行
// newRow 现在就是新创建的 <tr> 元素，你可以继续往里面添加单元格

const table = document.getElementById('myTable');
table.deleteRow(0); // 删除第一行

const firstRow = document.getElementById('myTable').rows[0]; // 获取第一行
const newCell = firstRow.insertCell(-1); // 在第一行末尾添加一个新单元格
newCell.textContent = '新列数据';

const firstRow = document.getElementById('myTable').rows[0];
firstRow.deleteCell(0); // 删除第一行的第一个单元格

const cellToModify = document.getElementById('myTable').rows[1].cells[0]; // 第二行第一个单元格
cellToModify.textContent = '更新后的值';
// 如果需要插入HTML内容，就用 innerHTML
// cellToModify.innerHTML = '<strong>加粗的值</strong>';

function sortTable(columnIndex, type, isAscending) {
const tableBody = document.getElementById('myTableBody');
const rows = Array.from(tableBody.querySelectorAll('tr'));
rows.sort((rowA, rowB) => {
const cellA = rowA.cells[columnIndex].textContent;
const cellB = rowB.cells[columnIndex].textContent;
let comparison = 0;
if (type === 'number') {
comparison = parseFloat(cellA) - parseFloat(cellB);
} else if (type === 'string') {
comparison = cellA.localeCompare(cellB);
}
// 还可以有日期等其他类型
return isAscending ? comparison : -comparison;
});
// 清空并重新添加排序后的行
rows.forEach(row => tableBody.appendChild(row));
}
// 示例：点击表头触发排序
// document.getElementById('headerCol0').addEventListener('click', () => sortTable(0, 'string', true));

function filterTable(searchText) {
const tableBody = document.getElementById('myTableBody');
const rows = tableBody.querySelectorAll('tr');
const lowerCaseSearchText = searchText.toLowerCase();
rows.forEach(row => {
let rowMatches = false;
// 遍历当前行的所有单元格
Array.from(row.cells).forEach(cell => {
if (cell.textContent.toLowerCase().includes(lowerCaseSearchText)) {
rowMatches = true;
}
});
row.style.display = rowMatches ? '' : 'none'; // 显示或隐藏行
});
}
// 示例：输入框内容变化时触发筛选
// document.getElementById('searchInput').addEventListener('input', (e) => filterTable(e.target.value));

const tableBody = document.getElementById('myTableBody');
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
const newRow = document.createElement('tr');
const cell1 = document.createElement('td');
cell1.textContent = `数据 ${i}`;
newRow.appendChild(cell1);
fragment.appendChild(newRow); // 添加到 DocumentFragment
}
tableBody.appendChild(fragment); // 一次性添加到 DOM