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