html中使用js+table 实现分页

可以通过以下步骤在 HTML 中使用 JavaScript 和表格实现分页：

1. 创建一个 HTML 表格，其中包含数据。
2. 创建一个 JavaScript 函数，该函数负责将表格分页，并在每个页面上显示指定数量的行。
3. 在 HTML 中创建一个分页控件，该控件允许用户浏览不同的表格页面。
4. 将 JavaScript 函数与分页控件链接，以便在用户单击“下一页”或“上一页”按钮时触发函数并显示相应的表格页面。

以下是一个示例代码，可以用作参考：

HTML 代码：

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>上海</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>28</td>
      <td>广州</td>
    </tr>
    <tr>
      <td>赵六</td>
      <td>27</td>
      <td>深圳</td>
    </tr>
    <tr>
      <td>陈七</td>
      <td>33</td>
      <td>成都</td>
    </tr>
    <tr>
      <td>黄八</td>
      <td>29</td>
      <td>重庆</td>
    </tr>
  </tbody>
</table>

<div id="pagination">
  <button onclick="previousPage()">上一页</button>
  <button onclick="nextPage()">下一页</button>
</div>

JavaScript 代码：

var table = document.getElementById("myTable");
var rowsPerPage = 2;
var currentPage = 0;

function nextPage() {
  currentPage++;
  displayTable();
}

function previousPage() {
  currentPage--;
  displayTable();
}

function displayTable() {
  var start = currentPage * rowsPerPage;
  var end = start + rowsPerPage;
  var rows = table.rows;

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

displayTable();

说明：

1. 表格中有 6 行数据，每页显示 2 行。
2. JavaScript 中的 `displayTable()` 函数根据当前页数和每页显示的行数，计算出应该显示哪些行，并将其它行隐藏。
3. `nextPage()` 和 `previousPage()` 函数分别将当前页数加一或减一，然后重新调用 `displayTable()` 函数以更新显示。
4. HTML 中的分页控件只包含两个按钮，分别绑定 `nextPage()` 和 `previousPage()` 函数。