html中使用js+table 实现分页

要使用 JavaScript 和表格实现分页，可以按照以下步骤：

1. 在 HTML 中创建一个表格，并添加一个 ID。

<table id="myTable">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1, Cell 1</td>
      <td>Row 1, Cell 2</td>
      <td>Row 1, Cell 3</td>
    </tr>
    <tr>
      <td>Row 2, Cell 1</td>
      <td>Row 2, Cell 2</td>
      <td>Row 2, Cell 3</td>
    </tr>
    <!-- add more rows here -->
  </tbody>
</table>

2. 创建一个 JavaScript 函数，该函数用于分页并显示表格的指定行数。

function displayTable(pageSize, pageNumber) {
  var table = document.getElementById("myTable");
  var rows = table.getElementsByTagName("tr");
  var firstRow = pageNumber * pageSize;
  var lastRow = firstRow + pageSize;

  for (var i = 1; i < rows.length; i++) {
    if (i < firstRow || i >= lastRow) {
      rows[i].style.display = "none";
    } else {
      rows[i].style.display = "";
    }
  }
}

3. 在 HTML 中添加一个分页控件，该控件包含一个下拉列表和一个按钮，用于选择每页显示的行数和跳转到指定页数。

<div>
  Show 
  <select id="pageSizeSelect">
    <option>5</option>
    <option>10</option>
    <option>20</option>
  </select>
  rows per page

  <button onclick="goToPage()">Go</button>
</div>

4. 创建一个 JavaScript 函数，该函数从下拉列表中获取每页显示的行数，并调用 displayTable 函数以显示指定页数的行。

function goToPage() {
  var pageSizeSelect = document.getElementById("pageSizeSelect");
  var pageSize = pageSizeSelect.options[pageSizeSelect.selectedIndex].value;
  var pageNumber = 0;

  displayTable(pageSize, pageNumber);
}

5. 最后，需要在页面加载时调用 displayTable 函数以显示默认的行数和第一页的行。

window.onload = function() {
  var pageSizeSelect = document.getElementById("pageSizeSelect");
  var pageSize = pageSizeSelect.options[pageSizeSelect.selectedIndex].value;
  var pageNumber = 0;

  displayTable(pageSize, pageNumber);
};

这样，就可以使用 JavaScript 和表格实现分页了。需要注意的是，该方法只适用于少量数据的情况，对于大量数据的分页，需要使用服务器端分页或其他分页插件。