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