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