jQuery-表中数据的添加与删除

以下是一个使用jQuery实现在表格中添加和删除数据的简单示例：

HTML 部分：

<table id="data-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Delete</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
 
<button id="add-btn">Add Data</button>

JavaScript 部分（使用 jQuery）：

$(document).ready(function() {
  // 添加数据函数
  function addData() {
    var name = $('#name-input').val();
    var age = $('#age-input').val();
    $('#data-table tbody').append(`
      <tr>
        <td>${name}</td>
        <td>${age}</td>
        <td><button class="delete-btn">Delete</button></td>
      </tr>
    `);
  }
 
  // 删除数据函数
  function deleteData() {
    $('#data-table tbody').on('click', '.delete-btn', function() {
      $(this).closest('tr').remove();
    });
  }
 
  // 绑定添加数据事件
  $('#add-btn').click(addData);
 
  // 绑定删除数据事件
  deleteData();
});

在这个示例中，我们有一个表格用于展示数据，一个输入字段用于输入名字和年龄，以及一个按钮用于添加数据。添加数据时，新数据会被添加到表格的 tbody 中，并且每行有一个删除按钮。点击删除按钮会从表格中删除对应的行。