使用jQuery更新表格行数据——Bootstrap模态框实现行数据编辑

咱直接上完整可运行的方案，一步一步给你讲清楚怎么实现这个需求：

1. HTML结构（表格 + Bootstrap模态框） #

先把基础页面结构搭好，表格每行第一列放复选框，模态框里放编辑表单：

<!-- 引入Bootstrap依赖（项目已引入可忽略） -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

<!-- 数据表格 -->
<table class="table table-bordered mt-4">
  <thead>
    <tr>
      <th><input type="checkbox" id="selectAll"></th>
      <th>ID</th>
      <th>姓名</th>
      <th>邮箱</th>
      <th>职位</th>
    </tr>
  </thead>
  <tbody>
    <tr data-id="1">
      <td><input type="checkbox" class="row-checkbox"></td>
      <td>1</td>
      <td>张三</td>
      <td>zhangsan@example.com</td>
      <td>前端开发</td>
    </tr>
    <tr data-id="2">
      <td><input type="checkbox" class="row-checkbox"></td>
      <td>2</td>
      <td>李四</td>
      <td>lisi@example.com</td>
      <td>后端开发</td>
    </tr>
  </tbody>
</table>

<!-- Bootstrap模态框 -->
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="editModalLabel">编辑行数据</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form id="editForm">
        <div class="modal-body">
          <input type="hidden" id="rowId">
          <div class="mb-3">
            <label for="editName" class="form-label">姓名</label>
            <input type="text" class="form-control" id="editName" required>
          </div>
          <div class="mb-3">
            <label for="editEmail" class="form-label">邮箱</label>
            <input type="email" class="form-control" id="editEmail" required>
          </div>
          <div class="mb-3">
            <label for="editPosition" class="form-label">职位</label>
            <input type="text" class="form-control" id="editPosition" required>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="submit" class="btn btn-primary">保存修改</button>
        </div>
      </form>
    </div>
  </div>
</div>

2. JavaScript核心逻辑 #

接下来写JS代码，实现三个核心功能：选中复选框填充表单、提交表单更新表格、处理单选逻辑（避免多选）：

$(document).ready(function() {
  // 单选逻辑：每次只允许选中一行
  $('.row-checkbox').on('change', function() {
    if ($(this).is(':checked')) {
      $('.row-checkbox').not(this).prop('checked', false);
      // 填充表单并打开模态框
      fillEditForm($(this).closest('tr'));
      const editModal = new bootstrap.Modal(document.getElementById('editModal'));
      editModal.show();
    }
  });

  // 把选中行的数据填充到模态框表单
  function fillEditForm(row) {
    const rowId = row.data('id');
    const name = row.find('td:eq(2)').text();
    const email = row.find('td:eq(3)').text();
    const position = row.find('td:eq(4)').text();

    $('#rowId').val(rowId);
    $('#editName').val(name);
    $('#editEmail').val(email);
    $('#editPosition').val(position);
  }

  // 表单提交：更新表格行数据
  $('#editForm').on('submit', function(e) {
    e.preventDefault(); // 阻止默认跳转

    const rowId = $('#rowId').val();
    const name = $('#editName').val();
    const email = $('#editEmail').val();
    const position = $('#editPosition').val();

    // 找到目标行并更新内容
    const targetRow = $(`tr[data-id="${rowId}"]`);
    targetRow.find('td:eq(2)').text(name);
    targetRow.find('td:eq(3)').text(email);
    targetRow.find('td:eq(4)').text(position);

    // 关闭模态框并取消复选框选中状态
    const editModal = bootstrap.Modal.getInstance(document.getElementById('editModal'));
    editModal.hide();
    targetRow.find('.row-checkbox').prop('checked', false);

    // 如果需要同步后端，这里加AJAX请求即可
    // $.post('/api/update-data', {id: rowId, name, email, position}, res => {
    //   console.log('后端更新成功');
    // });
  });

  // 全选/取消全选（可选功能）
  $('#selectAll').on('change', function() {
    $('.row-checkbox').prop('checked', $(this).is(':checked'));
  });
});

3. 关键细节说明 #

• 单选控制：监听复选框change事件，选中当前行时自动取消其他行的选中状态，确保每次只编辑一行。
• 数据定位：给表格行加data-id属性，方便快速找到要更新的行；用td:eq(index)定位列（索引从0开始）。
• 无刷新更新：直接通过jQuery操作DOM修改表格内容，全程不需要刷新页面；如果要和后端交互，在表单提交处添加AJAX请求即可。
• Bootstrap规范：用官方Modal实例方法控制模态框的打开/关闭，避免出现兼容性问题。

内容的提问来源于stack exchange，提问作者Zeeshan