JQuery是一款輕量級的JavaScript庫，可以簡化JavaScript編程的復雜性。其中一個非常有用的功能是表格編輯、添加和刪除。這個功能可以讓用戶方便地修改網頁上的表格內容，而不需要重新加載整個頁面。

// 編輯表格
$(document).on('click', '.edit-btn', function() {
var row = $(this).closest('tr');
var cols = row.children('td');
var data = {
id: row.attr('data-id'),
name: cols.eq(0).text(),
age: cols.eq(1).text(),
gender: cols.eq(2).text()
};
// 彈出編輯框
$('#edit-form input[name="id"]').val(data.id);
$('#edit-form input[name="name"]').val(data.name);
$('#edit-form input[name="age"]').val(data.age);
$('#edit-form input[name="gender"]').val(data.gender);
$('#edit-modal').modal('show');
});
// 添加表格行
$(document).on('submit', '#add-form', function(e) {
e.preventDefault();
var data = {
name: $('#add-form input[name="name"]').val(),
age: $('#add-form input[name="age"]').val(),
gender: $('#add-form input[name="gender"]').val()
};
var row = '<tr>' +
'<td>' + data.name + '</td>' +
'<td>' + data.age + '</td>' +
'<td>' + data.gender + '</td>' +
'<td>' +
'<button class="edit-btn">編輯</button>' +
'<button class="delete-btn">刪除</button>' +
'</td>' +
'</tr>';
$('#table tbody').append(row);
});
// 刪除表格行
$(document).on('click', '.delete-btn', function() {
$(this).closest('tr').remove();
});

上面的代碼是一個基本的實現，其中包含三個函數。第一個函數（edit-btn）用于編輯表格行，它會獲取當前所點擊按鈕所在的行，并將行內容放入編輯框中。第二個函數（add-form）是用于添加表格行，它會獲取表單中的數據并將其作為一行加入到表格中。最后一個函數（delete-btn）用于刪除表格行，它僅需要獲取當前所點擊按鈕所在的行并將其刪除即可。

這個表格編輯、添加、刪除的功能是非常有用的，特別是在需要經常更新表格內容的網站上。通過使用jQuery，我們可以方便地實現這個功能，并讓用戶更方便地完成表格操作。