如何用jQuery实现HTML表格行数选择：默认10行，支持增减显示

修正后的HTML代码 #

先修正原下拉框的文本错误（第三个选项文本与value不匹配，已调整为30）：

<select id="rowCountSelector">
  <option value="10">10</option>
  <option value="20">20</option>
  <option value="30">30</option>
</select>

<table id="dataTable">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <!-- 示例添加超过10行的测试数据 -->
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
    <tr>
      <td>March</td>
      <td>$120</td>
    </tr>
    <tr>
      <td>April</td>
      <td>$90</td>
    </tr>
    <tr>
      <td>May</td>
      <td>$150</td>
    </tr>
    <tr>
      <td>June</td>
      <td>$70</td>
    </tr>
    <tr>
      <td>July</td>
      <td>$110</td>
    </tr>
    <tr>
      <td>August</td>
      <td>$60</td>
    </tr>
    <tr>
      <td>September</td>
      <td>$130</td>
    </tr>
    <tr>
      <td>October</td>
      <td>$85</td>
    </tr>
    <tr>
      <td>November</td>
      <td>$95</td>
    </tr>
    <tr>
      <td>December</td>
      <td>$105</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$1290</td>
    </tr>
  </tfoot>
</table>

jQuery实现代码 #

$(document).ready(function() {
  // 获取表格tbody的所有行
  const $tbodyRows = $('#dataTable tbody tr');
  // 获取下拉选择器
  const $rowSelector = $('#rowCountSelector');

  // 统一处理行显示逻辑的函数
  function updateRowDisplay(showCount) {
    // 先显示所有行，再隐藏超出指定数量的部分
    $tbodyRows.show();
    if ($tbodyRows.length > showCount) {
      $tbodyRows.slice(showCount).hide();
    }
  }

  // 页面初始化时，默认按10行显示（总行数超过10时自动隐藏多余行）
  const defaultShowCount = parseInt($rowSelector.val());
  updateRowDisplay(defaultShowCount);

  // 监听下拉选择器的变化，实时切换显示行数
  $rowSelector.on('change', function() {
    const selectedCount = parseInt($(this).val());
    updateRowDisplay(selectedCount);
  });
});

逻辑说明 #

• 初始化处理：页面加载完成后，自动触发默认显示逻辑，若表格总行数超过10，只保留前10行显示，其余隐藏。
• 显示控制函数：updateRowDisplay先重置所有行的显示状态，再通过slice方法选中超出指定数量的行并隐藏，确保每次切换都能精准控制显示行数。
• 下拉交互：监听下拉框的选择变化，每次选中新数值时，立即调用显示控制函数更新表格行的显示状态。

内容的提问来源于stack exchange，提问作者sumitkhatrii