JS 表格增刪功能：原生 DOM 操作與 AJAX 持久化

刪除實現

function deleteRow(btn) {
    const row = btn.closest('tr');
    const id = row.dataset.id; // 假設
    fetch('/api/rows/' + id, {method:'DELETE'})
        .then(r=>{ if(r.ok) row.remove(); });
}

新增/保存實現

function saveRow(data) {
    const method = data.id ? 'PUT' : 'POST';
    const url = data.id ? '/api/rows/' + data.id : '/api/rows';
    fetch(url, {
        method, headers:{'Content-Type':'application/json'},
        body: JSON.stringify(data)
    }).then(r=>r.json()).then(saved => {
        // 更新表格行或追加新行
        renderRow(saved);
    });

渲染輔助

function renderRow(rowData) {
    const tr = document.createElement('tr');
    tr.dataset.id = rowData.id;
    tr.innerHTML = `${rowData.name}...刪除`;
    document.querySelector('#tbody').appendChild(tr);
}

要點

• 每行綁定 data-id 關聯後端主鍵
• 統一用 fetch + async/await 處理異步
• 後端需返回保存後的完整對象（含生成的 ID）