本文详解如何在 bootstrap 模态框中编辑表格行，并通过 jquery 实现「编辑→提交→原地更新」而非重复添加新行，解决常见“新增代替修改”问题。
在构建动态管理表格（如分类、标签、用户列表）时，一个典型需求是：点击「编辑」按钮打开模态框，预填当前行数据；修改后点击「提交」，不新增行，而是直接更新原行内容及隐藏字段值。原始代码的问题在于——无论是否处于编辑状态，submit 事件始终执行 append()，导致每次提交都追加新行。
✅ 正确实现思路
核心在于状态追踪 + DOM 定位 + 条件分支：
- 使用全局变量 editing 记录当前正在编辑的行索引（如 x-index="2"），初始为 null；
- 「编辑」操作：读取目标行的 x-index 和文本内容，填充模态框，并设置 editing = index；
- 「提交」操作：判断 editing !== null，则定位对应 <tr>，更新其首列文本和隐藏 <input> 的 value 属性，最后重置 editing = null；
- 新增操作：仅当 editing === null 时执行 append() 并递增计数器。
✅ 完整可运行代码（含关键注释）
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<button type="button" style="float:right" class="btn btn-primary" data-toggle="modal" data-target="#modalitems">Add Category</button>
<div class="table-responsive">
<table class="table" id="categoryList">
<thead>
<tr>
<th>Category Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<!-- 动态插入行 -->
</tbody>
</table>
</div>
<div class="modal fade" id="modalitems" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form id="modalfrmdata">
<div class="modal-body">
<div class="form-group">
<label class="col-xs-3 control-label">Category Name</label>
<div class="col-xs-9">
<input type="text" id="txtcategoryname" name="txtcategoryname" class="form-control" maxlength="100" required />
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function() {
let editing = null; // 全局编辑状态：null=新增，数字=正在编辑的x-index
let counter = 0;
// 表单提交处理：区分新增 vs 更新
$("#modalfrmdata").submit(function(e) {
e.preventDefault();
const categoryname = $("#txtcategoryname").val().trim();
if (!categoryname) return; // 防空提交
if (editing === null) {
// ✅ 新增：追加带x-index的新行
$('#categoryList tbody').append(`
<tr x-index="${counter}">
<td>${categoryname}</td>
<td class="content tengah">
<button type="button" class="btn btn-success btn-sm btn-edit" data-toggle="modal" data-target="#modalitems">Edit</button>
<button type="button" class="btn btn-danger btn-sm btn-delete">Delete</button>
</td>
</tr>
`);
counter++;
} else {
// ✅ 更新：定位并修改指定x-index的行
const $row = $(`#categoryList tbody tr[x-index="${editing}"]`);
$row.find('td:first').text(categoryname); // 更新可见文本
editing = null;
}
// 重置表单 & 关闭模态框（推荐）
$("#txtcategoryname").val('');
$('#modalitems').modal('hide'); // ✅ 主动关闭模态框
});
// 删除行
$("#categoryList").on("click", ".btn-delete", function() {
$(this).closest("tr").remove();
});
// 编辑行：记录索引 + 填充表单
$("#categoryList").on("click", ".btn-edit", function() {
const $row = $(this).closest("tr");
editing = $row.attr('x-index');
const currentName = $row.find('td:first').text();
$("#txtcategoryname").val(currentName);
});
});
</script>⚠️ 注意事项与最佳实践
- 模态框需主动关闭：原始代码未关闭模态框，用户修改后仍停留在弹窗中。务必在提交成功后调用 $('#modalitems').modal('hide')。
- 避免隐藏 input：原方案将 <input> 嵌入 <td> 内易引发结构混乱且无实际用途（提交由 JS 控制）。本文移除冗余 hidden input，简化 DOM。
- 输入校验不可少：示例中加入 .trim() 和空值拦截，防止空白数据入库或显示。
- x-index 是轻量方案：适用于单页简单场景；如需持久化或复杂交互，建议改用 data-id 绑定后端主键，并配合 AJAX 提交。
- Bootstrap 版本兼容性：本例基于 Bootstrap 3.4，若使用 Bootstrap 5+，需替换 data-toggle/data-target 为 data-bs-*，并调整 modal 方法（如 modal('hide') → bootstrap.Modal.getInstance(...).hide()）。
通过以上重构，你将获得一个健壮、可维护的行内编辑功能——新增清晰、编辑精准、体验流畅。
