jquery实现表格增删改查

好的，以下是一个简单的示例代码，用于实现表格增删改查的功能，使用 jQuery 和 AJAX 技术：

HTML 代码：

<table id="myTable">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Age</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <!-- 表格数据会动态生成 -->
  </tbody>
</table>

<form id="addForm">
  <input type="text" name="name" placeholder="Name">
  <input type="number" name="age" placeholder="Age">
  <button type="submit">Add</button>
</form>

<form id="editForm">
  <input type="hidden" name="id">
  <input type="text" name="name" placeholder="Name">
  <input type="number" name="age" placeholder="Age">
  <button type="submit">Update</button>
</form>

jQuery 代码：

// 显示所有数据
function showData() {
  $.ajax({
    url: 'api.php', // 后端接口地址
    type: 'GET',
    dataType: 'json',
    success: function(data) {
      var tbody = $('#myTable tbody');
      tbody.empty(); // 先清空表格数据
      $.each(data, function(index, item) {
        var tr = $('<tr>').appendTo(tbody);
        $('<td>').text(item.id).appendTo(tr);
        $('<td>').text(item.name).appendTo(tr);
        $('<td>').text(item.age).appendTo(tr);
        var td = $('<td>').appendTo(tr);
        $('<button>').text('Edit').on('click', function() {
          // 点击 Edit 按钮时，显示编辑表单
          $('#editForm [name=id]').val(item.id);
          $('#editForm [name=name]').val(item.name);
          $('#editForm [name=age]').val(item.age);
        }).appendTo(td);
        $('<button>').text('Delete').on('click', function() {
          // 点击 Delete 按钮时，删除该行数据
          $.ajax({
            url: 'api.php?id=' + item.id,
            type: 'DELETE',
            success: function() {
              showData(); // 数据删除成功后，重新显示所有数据
            }
          });
        }).appendTo(td);
      });
    }
  });
}

// 添加数据
$('#addForm').on('submit', function(event) {
  event.preventDefault(); // 阻止表单提交
  $.ajax({
    url: 'api.php',
    type: 'POST',
    data: $(this).serialize(),
    success: function() {
      // 数据添加成功后，清空表单并重新显示所有数据
      $('#addForm')[0].reset();
      showData();
    }
  });
});

// 更新数据
$('#editForm').on('submit', function(event) {
  event.preventDefault(); // 阻止表单提交
  $.ajax({
    url: 'api.php',
    type: 'PUT',
    data: $(this).serialize(),
    success: function() {
      // 数据更新成功后，清空表单并重新显示所有数据
      $('#editForm')[0].reset();
      showData();
    }
  });
});

// 页面加载完成后，显示所有数据
$(document).ready(function() {
  showData();
});

以上代码中，我们使用了一个名为 `api.php` 的后端接口，用于处理增删改查的请求。你需要根据实际情况自行编写这个接口。