jQuery 表格操作技术教程 – 实现动态增删改查

本教程将介绍如何使用jQuery来实现表格的动态增删改查功能，非常适合作为练习或者在实际项目中应用。

实现步骤：

1. 创建基础HTML结构，包括一个表格和一些操作按钮。
2. 使用jQuery为表格添加动态行。
3. 为表格添加删除行的功能。
4. 实现行的修改功能。

详细案例讲解：

添加新行

$(document).ready(function () {
// 添加新行
$(‘#addRow’).click(function () {
var newRow = `

`;
$(‘#myTable tbody’).append(newRow);
});

// 编辑功能
$(‘#myTable’).on(‘click’, ‘.edit’, function () {
var $row = $(this).closest(‘tr’);
$row.find(‘td:not(:last-child)’).prop(‘contenteditable’, true);
});

// 失去焦点时保存编辑内容
$(‘#myTable tbody tr td[contenteditable]’).blur(function () {
var $this = $(this);
var oldValue = $this.data(‘old-value’);
$this.removeData(‘old-value’);

if ($this.text() !== oldValue) {
// 这里可以添加保存逻辑，例如AJAX请求
console.log(‘保存编辑内容：’, $this.text());
}
}).on(‘focus’, function () {
$(this).data(‘old-value’, $(this).text());
});

// 删除功能
$(‘#myTable’).on(‘click’, ‘.delete’, function () {
$(this).closest(‘tr’).remove();
});
});