使用jQuery完成表格的增删改查4个功能

以下是一个简单的示例，展示了如何使用jQuery来实现对一个简单的表格进行增删改查操作。

HTML 部分:

<table id="myTable">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Age</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
 
<input type="text" id="idInput" placeholder="ID">
<input type="text" id="nameInput" placeholder="Name">
<input type="number" id="ageInput" placeholder="Age">
 
<button id="addBtn">Add</button>
<button id="deleteBtn">Delete</button>
<button id="editBtn">Edit</button>
<button id="searchBtn">Search</button>

jQuery 部分:

$(document).ready(function(){
  // 添加功能
  $('#addBtn').click(function(){
    var id = $('#idInput').val();
    var name = $('#nameInput').val();
    var age = $('#ageInput').val();
    $('#myTable tbody').append('<tr><td>'+id+'</td><td>'+name+'</td><td>'+age+'</td><td><button class="editBtn">Edit</button> <button class="deleteBtn">Delete</button></td></tr>');
  });
 
  // 删除功能
  $('#myTable').on('click', '.deleteBtn', function(){
    $(this).closest('tr').remove();
  });
 
  // 编辑功能
  $('#myTable').on('click', '.editBtn', function(){
    var row = $(this).closest('tr');
    var id = row.find('td:eq(0)').text();
    var name = row.find('td:eq(1)').text();
    var age = row.find('td:eq(2)').text();
    $('#idInput').val(id);
    $('#nameInput').val(name);
    $('#ageInput').val(age);
  });
 
  // 搜索功能
  $('#searchBtn').click(function(){
    var searchId = $('#idInput').val();
    $('#myTable tbody tr').filter(function(){
      $(this).toggle($(this).find('td:eq(0)').text() === searchId);
    });
  });
});

这段代码提供了基本的增删改查功能，并且使用了事件委托来处理动态添加的行的事件。在实际应用中，您可能需要添加更多的验证和错误处理，以及更复杂的逻辑来满足具体的需求。