如何用JavaScript的document.querySelectorAll获取多页表格的所有行？

我有员工表格的HTML代码：

<table id="emp-table">
    <thead>
        <th col-index = 1>Employee ID</th>
        <th col-index = 2>Gender</th>
    </thead>
    <tbody>
        <tr>
            <td>101</td>
            <td>M</td>
        </tr>
        <tr>
            <td>102</td>
            <td>M</td>
        </tr>
        <tr>
            <td>103</td>
            <td>F</td>
        </tr>
    </tbody>
</table>

分页导航代码如下：

<nav>
    <ul class="pagination">
      <li><a href="#">Previous</a></li>
      <li><a href="?page=1">1</a></li>
      <li><a  href="?page=2">2</a></li>
      <li><a  href="?page=2">Next</a></li>
      <li><a  href="?page=5">Last »</a></li>
    </ul>
  </nav>

用下面的JS只能拿到当前页面的表格行，没法获取所有分页的数据：

const rows = document.querySelectorAll("#emp-table > tbody > tr")

怎么才能获取所有分页里的表格行？

分两种场景处理，取决于你的分页是前端渲染还是后端加载：

场景1：前端分页（所有数据已在DOM中，只是隐藏） #

如果所有分页的表格行其实已经加载到页面里了，只是用CSS（比如display: none）隐藏起来切换显示，直接修改选择器就能拿到所有行：

// 不管是否隐藏，获取tbody下所有tr
const allRows = document.querySelectorAll("#emp-table tbody tr");

要是隐藏的行在其他容器（比如多个tbody或者单独的div）里，就调整选择器覆盖所有包含行的容器：

// 示例：匹配所有id包含emp-table的容器下的tr
const allRows = document.querySelectorAll("[id*='emp-table'] tbody tr");

场景2：后端分页（每页数据单独请求加载） #

这种情况当前页面只渲染了单页数据，得主动请求所有分页的内容：

方法1：遍历分页链接抓取数据 #

通过分页导航里的链接，逐个请求每个页面的HTML，提取表格行：

async function getAllEmployeeRows() {
    const allRows = [];
    // 拿到所有带page参数的分页链接，排除Previous/Next这类文本链接
    const pageLinks = document.querySelectorAll(".pagination a[href^='?page=']");
    // 去重页码，避免重复请求
    const uniquePages = [...new Set(pageLinks.map(link => link.href.split('page=')[1]))];

    for (const pageNum of uniquePages) {
        const response = await fetch(`?page=${pageNum}`);
        const html = await response.text();
        // 创建临时DOM解析返回的HTML
        const tempDiv = document.createElement('div');
        tempDiv.innerHTML = html;
        // 提取当前页的表格行
        const pageRows = tempDiv.querySelectorAll("#emp-table tbody tr");
        // 转成数组存到总列表里
        allRows.push(...Array.from(pageRows));
    }

    return allRows;
}

// 调用函数获取所有行
getAllEmployeeRows().then(rows => {
    console.log('所有分页的表格行:', rows);
});

方法2：调用全量数据接口（更高效） #

如果后端有提供获取所有员工数据的接口（比如/api/employees/all），直接请求接口是最优解，不用逐个抓页面：

async function getAllEmployeeData() {
    const response = await fetch('/api/employees/all');
    const employees = await response.json();
    // 根据接口返回的数据结构处理，比如生成表格行或者直接用原始数据
    console.log('所有员工数据:', employees);
}

getAllEmployeeData();

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