JQuery实现网页表格动态增加与删除内容

JQuery是一个JavaScript库，可以用它来方便地操作HTML元素。以下是一个简单的示例，演示如何使用JQuery实现网页表格动态增加和删除内容。

首先，我们需要在HTML文件中引入JQuery库：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

然后，我们可以在HTML文件中创建一个空的表格，并为其添加一个按钮，用于动态增加表格行：

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Gender</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

<button id="addRowBtn">Add Row</button>

接下来，我们可以使用以下JQuery代码来实现动态增加表格行的功能：

$(document).ready(function() {
  // 给按钮添加点击事件
  $('#addRowBtn').click(function() {
    // 创建一个新的表格行
    var newRow = $('<tr>');
    // 创建三个新的表格单元格，并为其添加数据
    var nameCell = $('<td>').text('New Name');
    var ageCell = $('<td>').text('New Age');
    var genderCell = $('<td>').text('New Gender');
    // 将这些单元格添加到新的表格行中
    newRow.append(nameCell);
    newRow.append(ageCell);
    newRow.append(genderCell);
    // 将新的表格行添加到表格的tbody中
    $('#myTable tbody').append(newRow);
  });
});

以上代码中，我们首先使用`$(document).ready()`来确保页面加载完毕后再执行代码。然后，我们给按钮添加了一个点击事件，当用户点击按钮时，我们会创建一个新的表格行，并向其中添加三个单元格，然后将新的表格行添加到表格的tbody中。

接下来，我们可以使用以下JQuery代码来实现动态删除表格行的功能：

$(document).ready(function() {
  // 给表格行添加点击事件
  $('#myTable tbody').on('click', 'tr', function() {
    // 移除被点击的表格行
    $(this).remove();
  });
});

以上代码中，我们使用了JQuery的`on()`方法来为表格的tbody中的所有表格行添加一个点击事件。当用户点击任何一个表格行时，我们会将该表格行从DOM中移除。

综上所述，以上代码演示了如何使用JQuery实现网页表格动态增加和删除内容的功能。