jQuery 动态生成表格并实现行内编辑技术教程
教程概述
本教程将指导你如何使用jQuery动态生成一个表格，并实现行内编辑功能。通过这个案例，你将学会如何结合HTML和JavaScript来创建动态交互页面。
准备工作
确保你已经在项目中引入了jQuery库。
实现步骤
- 创建HTML页面并添加基础结构。
- 使用jQuery动态生成表格。
- 实现行内编辑功能。
详细案例讲解
1. 创建HTML页面并添加基础结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态生成表格并实现行内编辑</title>
<link rel="stylesheet" href="styles.css" rel="external nofollow" >
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<header>
<h1>表格示例</h1>
</header>
<main>
<table id="myTable">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</main>
<footer>
<button id="addRow">添加行</button>
</footer>
</body>
</html>
2. 使用jQuery动态生成表格
在`script.js`中编写代码，通过jQuery动态生成表格行。
$(document).ready(function() {
function addRow(data) {
const tableBody = $('#myTable tbody');
const row = '<tr>';
row += '<td contenteditable="true" data-name="id">' + data.id + '</td>';
row += '<td contenteditable="true" data-name="name">' + data.name + '</td>';
row += '<td contenteditable="true" data-name="age">' + data.age + '</td>';
row += '<td><button onclick="editRow(this)">保存</button></td>';
row += '</tr>';
tableBody.append(row);
}
$('#addRow').click(function() {
const newRow = {
id: $('#myTable tbody tr').length + 1,
name: '张三',
age: 25
};
addRow(newRow);
});
// 监听单元格内容变化
$('#myTable tbody').on('input', 'td[contenteditable="true"]', function() {
$(this).data('oldValue', $(this).text());
});
});
3. 实现行内编辑功能
在`script.js`中添加`editRow`函数，实现行内编辑保存功能。
function editRow(button) {
const row = $(button).closest('tr');
const cells = row.find('td[contenteditable="true"]');
cells.each(function() {
const newName = $(this).data('name');
const newValue = $(this).text();
const oldValue = $(this).data('oldValue');
if (newValue !== oldValue) {
console.log(`Updated ${newName} from "${oldValue}" to "${newValue}"`);
// 在这里添加你的更新逻辑，比如发送到后端
}
});
// 重置oldValue
cells.each(function() {
$(this).data('oldValue', $(this).text());
});
}
总结
通过本教程，你已经学会了如何使用jQuery动态生成表格，并实现行内编辑功能。你可以根据实际需求进一步完善和扩展此功能。
