html显示共4条，下拉框选择一页显示多少条，前往第几页

这是一个分页的功能，可以用 JavaScript 或者一些前端框架来实现。以下是一个简单的示例：

HTML：

<div id="pagination">
  <label>Show:</label>
  <select id="recordsPerPage">
    <option value="2">2</option>
    <option value="4" selected>4</option>
    <option value="6">6</option>
  </select>
  <label>records per page</label>
  <button id="prevPage">Previous</button>
  <button id="nextPage">Next</button>
  <label>Page:</label>
  <span id="currentPage">1</span>
  <span>of</span>
  <span id="totalPages">1</span>
</div>

<table id="table">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John Doe</td>
      <td>john.doe@example.com</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jane Doe</td>
      <td>jane.doe@example.com</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Bob Smith</td>
      <td>bob.smith@example.com</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Alice Johnson</td>
      <td>alice.johnson@example.com</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Tom Brown</td>
      <td>tom.brown@example.com</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Mary Green</td>
      <td>mary.green@example.com</td>
    </tr>
  </tbody>
</table>

JavaScript：

const table = document.getElementById('table');
const recordsPerPageSelect = document.getElementById('recordsPerPage');
const prevPageButton = document.getElementById('prevPage');
const nextPageButton = document.getElementById('nextPage');
const currentPageSpan = document.getElementById('currentPage');
const totalPagesSpan = document.getElementById('totalPages');

let currentPage = 1;
let recordsPerPage = parseInt(recordsPerPageSelect.value);

function updateTable() {
  for (let i = 0; i < table.rows.length; i++) {
    if (i < (currentPage - 1) * recordsPerPage || i >= currentPage * recordsPerPage) {
      table.rows[i].style.display = 'none';
    } else {
      table.rows[i].style.display = '';
    }
  }
  currentPageSpan.textContent = currentPage;
  totalPagesSpan.textContent = Math.ceil(table.rows.length / recordsPerPage);
}

recordsPerPageSelect.addEventListener('change', () => {
  recordsPerPage = parseInt(recordsPerPageSelect.value);
  currentPage = 1;
  updateTable();
});

prevPageButton.addEventListener('click', () => {
  if (currentPage > 1) {
    currentPage--;
    updateTable();
  }
});

nextPageButton.addEventListener('click', () => {
  if (currentPage < Math.ceil(table.rows.length / recordsPerPage)) {
    currentPage++;
    updateTable();
  }
});

updateTable();

这个示例实现了一个简单的分页功能，包括下拉框选择每页显示多少条记录、上一页和下一页按钮、当前页和总页数的显示。你可以根据自己的需求修改样式和细节。