jquery实现表格增删改查

以下是一个简单的示例，演示如何使用 jQuery 实现表格的增删改查：

HTML 代码：

<table id="myTable">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Age</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John</td>
      <td>30</td>
      <td>
        <button class="editBtn">Edit</button>
        <button class="deleteBtn">Delete</button>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jane</td>
      <td>25</td>
      <td>
        <button class="editBtn">Edit</button>
        <button class="deleteBtn">Delete</button>
      </td>
    </tr>
  </tbody>
</table>

<form id="myForm">
  <input type="hidden" id="idInput">
  <label>Name:</label>
  <input type="text" id="nameInput"><br>
  <label>Age:</label>
  <input type="text" id="ageInput"><br>
  <button type="submit" id="submitBtn">Submit</button>
  <button type="button" id="cancelBtn">Cancel</button>
</form>

JavaScript 代码：

$(document).ready(function() {
  // 点击编辑按钮
  $('.editBtn').click(function() {
    // 获取当前行的数据
    var id = $(this).closest('tr').find('td:eq(0)').text();
    var name = $(this).closest('tr').find('td:eq(1)').text();
    var age = $(this).closest('tr').find('td:eq(2)').text();
    // 将数据填充到表单中
    $('#idInput').val(id);
    $('#nameInput').val(name);
    $('#ageInput').val(age);
    // 显示表单
    $('#myForm').show();
  });

  // 点击删除按钮
  $('.deleteBtn').click(function() {
    // 删除当前行
    $(this).closest('tr').remove();
  });

  // 点击取消按钮
  $('#cancelBtn').click(function() {
    // 隐藏表单
    $('#myForm').hide();
    // 清空表单数据
    $('#idInput').val('');
    $('#nameInput').val('');
    $('#ageInput').val('');
  });

  // 提交表单
  $('#myForm').submit(function(event) {
    event.preventDefault();
    // 获取表单数据
    var id = $('#idInput').val();
    var name = $('#nameInput').val();
    var age = $('#ageInput').val();
    // 判断是新增还是编辑
    if (id == '') {
      // 新增
      var newRow = '<tr><td>' + ($('#myTable tr').length - 1) + '</td><td>' + name + '</td><td>' + age + '</td><td><button class="editBtn">Edit</button> <button class="deleteBtn">Delete</button></td></tr>';
      $('#myTable tbody').append(newRow);
    } else {
      // 编辑
      var row = $('#myTable tbody tr:eq(' + id + ')');
      row.find('td:eq(1)').text(name);
      row.find('td:eq(2)').text(age);
    }
    // 隐藏表单
    $('#myForm').hide();
    // 清空表单数据
    $('#idInput').val('');
    $('#nameInput').val('');
    $('#ageInput').val('');
  });
});

这个示例包含一个表格和一个表单。表格中包含 ID、Name、Age 和 Action 四列，Action 列中包含 Edit 和 Delete 按钮。当用户点击 Edit 按钮时，表单会显示，并将当前行的数据填充到表单中。当用户点击 Delete 按钮时，当前行会被删除。当用户在表单中填写完数据并点击 Submit 按钮时，会将数据保存到表格中。如果表单中的 ID 字段为空，则表示新增一行；否则表示编辑当前行。