在网页开发中，表格（Table）是一种常用的数据展示方式，为了提高用户体验，我们常常需要为表格添加编辑功能，让用户可以直接在表格中修改数据，本文将详细介绍如何使用jQuery实现点击编辑修改当前行的需求。
我们需要创建一个简单的HTML表格结构，表格中应包含数据以及编辑按钮，以下是一个简单的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Edit Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<table id="data-table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Alice</td>
<td>25</td>
<td><button class="edit-btn">Edit</button></td>
</tr>
<tr>
<td>2</td>
<td>Bob</td>
td>30</td>
<td><button class="edit-btn">Edit</button></td>
</tr>
</tbody>
</table>
<script>
// jQuery code will be added here
</script>
</body>
</html>
接下来，我们将使用jQuery为表格中的编辑按钮添加点击事件，当用户点击编辑按钮时，我们需要将当前行的数据填充到输入框中，并将输入框设置为可编辑状态，以下是实现这一功能的jQuery代码：
$(document).ready(function() {
$('#data-table').on('click', '.edit-btn', function() {
var $row = $(this).closest('tr');
var id = $row.find('td:first').text();
var name = $row.find('td:nth-child(2)').text();
var age = $row.find('td:nth-child(3)').text();
// 创建输入框并插入到表格中
var inputId = $('<input>').attr({ type: 'text', value: id });
var inputName = $('<input>').attr({ type: 'text', value: name });
var inputAge = $('<input>').attr({ type: 'text', value: age });
$row.find('td:first').html(inputId);
$row.find('td:nth-child(2)').html(inputName);
$row.find('td:nth-child(3)').html(inputAge);
// 移除编辑按钮
$(this).remove();
});
});
现在，当用户点击编辑按钮时，当前行的数据将会被替换为可编辑的输入框，接下来，我们需要为输入框添加失去焦点事件，以便在用户完成编辑后将数据更新到表格中，以下是实现这一功能的jQuery代码：
$(document).ready(function() {
// ...之前的编辑按钮点击事件代码
// 监听输入框失去焦点事件
$('#data-table').on('blur', 'input', function() {
var $row = $(this).closest('tr');
var id = $row.find('input:first').val();
var name = $row.find('input:nth-child(2)').val();
var age = $row.find('input:nth-child(3)').val();
// 将更新后的数据添加回表格
$row.find('td:first').text(id);
$row.find('td:nth-child(2)').text(name);
$row.find('td:nth-child(3)').text(age);
// 重新添加编辑按钮
var editBtn = $('<button class="edit-btn">Edit</button>');
$row.find('td:last').html(editBtn);
});
});
至此，我们已经实现了点击编辑按钮修改当前行的需求，用户可以在表格中直接编辑数据，编辑完成后数据会自动更新，这种交互方式可以提高用户体验，让用户更方便地进行数据修改操作，使用jQuery简化了DOM操作，使得代码更加简洁易读。