有几种方式可以使用JavaScript实现表格操作功能。以下是其中一种方式：
增加行：
var tableRef = document.getElementById('myTable').getElementsByTagName('tbody')[0];
var newRow = tableRef.insertRow(tableRef.rows.length);
var newCell1 = newRow.insertCell(0);
var newCell2 = newRow.insertCell(1);
newCell1.innerHTML = 'New Cell 1'; // 可以根据需要添加新的单元格
newCell2.innerHTML = 'New Cell 2';
删除行：
var tableRef = document.getElementById('myTable').getElementsByTagName('tbody')[0];
tableRef.deleteRow(rowToDelete);
排序行：
function sortTable(table, column, asc = true) {
const dirModifier = asc ? 1 : -1;
const rows = Array.from(table.querySelectorAll("tr"));
const sortedRows = rows.sort((a, b) => {
const aColText = a.querySelector(`td:nth-child(${column + 1})`).textContent.trim();
const bColText = b.querySelector(`td:nth-child(${column + 1})`).textContent.trim();
return aColText > bColText ? (1 * dirModifier) : (-1 * dirModifier);
});
table.innerHTML = '';
table.appendChild(table.querySelector('thead'));
sortedRows.forEach(row => table.appendChild(row));
}
const myTable = document.querySelector('#myTable');
myTable.querySelectorAll('th').forEach((header, index) => {
header.addEventListener('click', () => {
sortTable(myTable, index, !header.classList.contains('asc'));
header.classList.toggle('asc');
header.classList.toggle('desc');
});
});
你还可以在编辑模式下使用 contenteditable 属性来实现实时编辑。例如：
<td contenteditable='true'>Some cell text</td>