Ajax表格增删改查

好的，下面是关于使用 Ajax 实现表格增删改查的一些思路和代码示例。

1. 表格的展示

首先需要将表格展示在页面上，可以使用 HTML 的 table 标签和 tr、td 标签来创建表格。为了方便后续操作，可以给每一行的 tr 标签添加一个唯一的 id，例如：

<table>
  <tr id="row1">
    <td>1</td>
    <td>John</td>
    <td>Doe</td>
    <td>john@example.com</td>
    <td><button type="button" class="btn-edit">编辑</button> <button type="button" class="btn-delete">删除</button></td>
  </tr>
  <tr id="row2">
    <td>2</td>
    <td>Jane</td>
    <td>Doe</td>
    <td>jane@example.com</td>
    <td><button type="button" class="btn-edit">编辑</button> <button type="button" class="btn-delete">删除</button></td>
  </tr>
  <!-- ... -->
</table>

2. 点击按钮进行操作

接下来需要给每一行的 “编辑” 和 “删除” 按钮添加点击事件，当用户点击按钮时触发相应的操作。可以使用 jQuery 的 on() 方法来给按钮添加事件处理函数，例如：

$(document).on('click', '.btn-edit', function () {
  // 编辑操作
});

$(document).on('click', '.btn-delete', function () {
  // 删除操作
});

3. 编辑操作

当用户点击编辑按钮时，需要将该行的数据加载到编辑表单中，让用户进行修改。可以使用 jQuery 的 parent() 和 siblings() 方法来获取该行的数据，然后将数据填充到编辑表单中。例如：

$(document).on('click', '.btn-edit', function () {
  var row = $(this).parents('tr');
  var id = row.attr('id');
  var firstName = row.find('td:eq(1)').text();
  var lastName = row.find('td:eq(2)').text();
  var email = row.find('td:eq(3)').text();

  // 将数据填充到编辑表单中
  $('#edit-form input[name="id"]').val(id);
  $('#edit-form input[name="firstName"]').val(firstName);
  $('#edit-form input[name="lastName"]').val(lastName);
  $('#edit-form input[name="email"]').val(email);

  // 显示编辑表单
  $('#edit-modal').modal('show');
});

在编辑表单中，需要有一个保存按钮，当用户点击保存按钮时，需要将修改后的数据发送到后端进行更新。可以使用 jQuery 的 ajax() 方法来发送请求，例如：

$('#edit-form').submit(function (event) {
  event.preventDefault();

  var formData = $(this).serialize();
  var url = 'update.php';

  $.ajax({
    type: 'POST',
    url: url,
    data: formData,
    success: function (response) {
      // 更新成功，关闭编辑模态框并重新加载表格数据
      $('#edit-modal').modal('hide');
      loadTableData();
    },
    error: function () {
      // 更新失败，显示错误提示
      alert('更新失败');
    }
  });
});

4. 删除操作

当用户点击删除按钮时，需要将该行的数据发送到后端进行删除。可以使用 jQuery 的 ajax() 方法来发送请求，例如：

$(document).on('click', '.btn-delete', function () {
  var row = $(this).parents('tr');
  var id = row.attr('id');
  var url = 'delete.php?id=' + id;

  if (confirm('确定删除该行数据吗？')) {
    $.ajax({
      type: 'GET',
      url: url,
      success: function (response) {
        // 删除成功，重新加载表格数据
        loadTableData();
      },
      error: function () {
        // 删除失败，显示错误提示
        alert('删除失败');
      }
    });
  }
});

5. 加载表格数据

最后需要编写一个函数来加载表格数据。可以使用 jQuery 的 ajax() 方法来发送请求，获取后端返回的数据，然后将数据填充到表格中。例如：

function loadTableData() {
  var url = 'list.php';

  $.ajax({
    type: 'GET',
    url: url,
    dataType: 'json',
    success: function (data) {
      // 清空表格内容
      $('table tbody').empty();

      // 填充表格数据
      $.each(data, function (index, item) {
        var row = '<tr id="' + item.id + '"> \
                      <td>' + item.id + '</td> \
                      <td>' + item.firstName + '</td> \
                      <td>' + item.lastName + '</td> \
                      <td>' + item.email + '</td> \
                      <td><button type="button" class="btn-edit">编辑</button> <button type="button" class="btn-delete">删除</button></td> \
                  </tr>';
        $('table tbody').append(row);
      });
    },
    error: function () {
      // 加载数据失败，显示错误提示
      alert('加载数据失败');
    }
  });
}

// 页面加载完成后，立即加载表格数据
$(document).ready(function () {
  loadTableData();
});

以上就是使用 Ajax 实现表格增删改查的一个简单示例。当然，具体实现还需要根据具体的业务需求来进行调整。