JQuery添加并保存行中输入的数据
jQuery 添加并保存行中输入的数据
基础概念
jQuery 是一个快速、简洁的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互等操作。在表格中添加并保存行中输入的数据是一个常见的 Web 开发需求，通常涉及 DOM 操作和数据处理。
实现方案
1. 添加新行
// 添加新行到表格
function addNewRow() {
// 获取表格元素
var table = $('#dataTable tbody');
// 创建新行
var newRow = $('<tr>');
// 添加输入单元格
newRow.append('<td><input type="text" class="form-control" name="name"></td>');
newRow.append('<td><input type="text" class="form-control" name="email"></td>');
newRow.append('<td><input type="text" class="form-control" name="phone"></td>');
// 添加操作按钮
newRow.append('<td><button class="btn btn-success save-btn">保存</button> <button class="btn btn-danger cancel-btn">取消</button></td>');
// 添加到表格
table.append(newRow);
}2. 保存行数据
// 保存行数据
$(document).on('click', '.save-btn', function() {
var row = $(this).closest('tr');
var inputs = row.find('input');
// 收集数据
var data = {
name: inputs.eq(0).val(),
email: inputs.eq(1).val(),
phone: inputs.eq(2).val()
};
// 验证数据
if (!data.name || !data.email || !data.phone) {
alert('请填写所有字段');
return;
}
// 发送到服务器保存
$.ajax({
url: '/api/save-data',
type: 'POST',
data: JSON.stringify(data),
contentType: 'application/json',
success: function(response) {
// 成功保存后转换为普通行
row.html('');
row.append('<td>' + data.name + '</td>');
row.append('<td>' + data.email + '</td>');
row.append('<td>' + data.phone + '</td>');
row.append('<td><button class="btn btn-primary edit-btn">编辑</button> <button class="btn btn-danger delete-btn">删除</button></td>');
},
error: function(xhr, status, error) {
alert('保存失败: ' + error);
}
});
});3. 取消编辑
// 取消编辑
$(document).on('click', '.cancel-btn', function() {
$(this).closest('tr').remove();
});完整示例
<!DOCTYPE html>
<html>
<head>
<title>jQuery 添加并保存行数据</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
table {
margin-top: 20px;
}
.add-btn {
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="container">
<button id="addRowBtn" class="btn btn-primary add-btn">添加新行</button>
<table id="dataTable" class="table table-bordered">
<thead>
<tr>
<th>姓名</th>
<th>邮箱</th>
<th>电话</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 已有数据行 -->
<tr>
<td>张三</td>
<td>zhangsan@example.com</td>
<td>13800138000</td>
<td>
<button class="btn btn-primary edit-btn">编辑</button>
<button class="btn btn-danger delete-btn">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
<script>
$(document).ready(function() {
// 添加新行
$('#addRowBtn').click(addNewRow);
// 保存行数据
$(document).on('click', '.save-btn', saveRowData);
// 取消编辑
$(document).on('click', '.cancel-btn', function() {
$(this).closest('tr').remove();
});
// 编辑行
$(document).on('click', '.edit-btn', editRow);
// 删除行
$(document).on('click', '.delete-btn', deleteRow);
});
function addNewRow() {
var table = $('#dataTable tbody');
var newRow = $('<tr>');
newRow.append('<td><input type="text" class="form-control" name="name"></td>');
newRow.append('<td><input type="text" class="form-control" name="email"></td>');
newRow.append('<td><input type="text" class="form-control" name="phone"></td>');
newRow.append('<td><button class="btn btn-success save-btn">保存</button> <button class="btn btn-danger cancel-btn">取消</button></td>');
table.append(newRow);
}
function saveRowData() {
var row = $(this).closest('tr');
var inputs = row.find('input');
var data = {
name: inputs.eq(0).val(),
email: inputs.eq(1).val(),
phone: inputs.eq(2).val()
};
if (!data.name || !data.email || !data.phone) {
alert('请填写所有字段');
return;
}
// 模拟AJAX请求
setTimeout(function() {
// 成功保存后转换为普通行
row.html('');
row.append('<td>' + data.name + '</td>');
row.append('<td>' + data.email + '</td>');
row.append('<td>' + data.phone + '</td>');
row.append('<td><button class="btn btn-primary edit-btn">编辑</button> <button class="btn btn-danger delete-btn">删除</button></td>');
}, 500);
}
function editRow() {
var row = $(this).closest('tr');
var cells = row.find('td:not(:last-child)');
// 保存原始数据
var originalData = [];
cells.each(function() {
originalData.push($(this).text());
});
// 转换为编辑模式
row.html('');
row.append('<td><input type="text" class="form-control" name="name" value="' + originalData[0] + '"></td>');
row.append('<td><input type="text" class="form-control" name="email" value="' + originalData[1] + '"></td>');
row.append('<td><input type="text" class="form-control" name="phone" value="' + originalData[2] + '"></td>');
row.append('<td><button class="btn btn-success save-btn">保存</button> <button class="btn btn-danger cancel-btn">取消</button></td>');
}
function deleteRow() {
if (confirm('确定要删除这行数据吗？')) {
$(this).closest('tr').remove();
// 这里可以添加AJAX请求删除服务器数据
}
}
</script>
</body>
</html>优势
- 简化DOM操作：jQuery提供了简洁的API来操作DOM元素
- 事件委托：使用事件委托处理动态添加的元素
- 跨浏览器兼容：jQuery处理了浏览器兼容性问题
- 代码简洁：相比原生JavaScript，代码更简洁易读
应用场景
- 数据管理系统
- CRM系统
- 电子商务后台
- 任何需要动态添加和编辑表格数据的Web应用
常见问题及解决方案
问题1：事件绑定失效
原因：动态添加的元素无法直接绑定事件
解决：使用事件委托（如示例中的$(document).on('click', '.save-btn', ...)）
问题2：数据验证不完整
原因：前端验证不足 解决：添加必要的前端验证，同时服务器端也要进行验证
问题3：性能问题
原因：大量行数据导致页面变慢 解决：实现分页或虚拟滚动
问题4：数据同步问题
原因：前端修改后未及时同步到后端 解决：确保每次修改都发送到服务器，并处理服务器响应
扩展功能
- 批量操作：添加全选/反选功能
- 排序和筛选：添加表格排序和筛选功能
- 分页：实现分页加载大量数据
- 本地存储：使用localStorage临时保存数据
- 导入导出：添加Excel导入导出功能
相关·内容
没有搜到相关的文章
云服务器
ICP备案
云直播
即时通信 IM
实时音视频
腾讯云开发者
