javascript中过滤表格重复行的核心是提取主键→去重→保留首次出现行；需先确认主键位置（如data-id属性或某列文本），再用set记录已见主键，遍历tr元素时仅保留首次出现的行并重新渲染或原地删除重复行。

在 JavaScript 中根据唯一主键过滤表格行（如 HTML `

` 中的 ``）的重复数据，核心思路是：**提取每行主键值 → 去重 → 保留首次出现的行，移除后续重复行**。关键在于准确识别主键（比如某列的 data-id、或特定单元格文本），并高效去重。

明确主键所在位置

主键通常来自以下几种情况，需先确认：

• 行内有 data-id、data-key 等自定义属性（推荐，语义清晰）
• 某列（如第一列或最后一列）显示唯一 ID，可用 textContent 提取
• 行内隐藏 input 或 span 带有唯一标识，需用 querySelector 定位

例如，假设每行结构如下，主键为 data-id：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

<tr data-id="1001">
<td>张三</td>
<td>25</td>
</tr>

使用 Set + 遍历实现去重（最常用）

遍历所有 <tr>，用 <code>Set 记录已见的主键值，只保留第一次出现的行：

const table = document.getElementById('myTable');
const rows = Array.from(table.querySelectorAll('tbody tr'));
const seenKeys = new Set();
const uniqueRows = [];
<p>rows.forEach(row => {
const key = row.dataset.id; // 或 row.cells[0].textContent.trim()
if (!seenKeys.has(key)) {
seenKeys.add(key);
uniqueRows.push(row);
}
});</p><p>// 移除原表中所有行，再追加唯一行（保留顺序）
const tbody = table.querySelector('tbody') || table;
while (tbody.firstChild) tbody.removeChild(tbody.firstChild);
uniqueRows.forEach(row => tbody.appendChild(row));</p>

直接在 DOM 上原地删除重复行（节省内存）

若只需清理现有表格，不需新数组，可反向遍历（避免索引错乱）：

const rows = table.querySelectorAll('tbody tr');
const seen = new Set();
<p>// 从后往前删，不影响前面索引
for (let i = rows.length - 1; i >= 0; i--) {
const key = rows[i].dataset.id;
if (seen.has(key)) {
rows[i].remove(); // 直接移除 DOM 节点
} else {
seen.add(key);
}
}</p>

处理主键在单元格中的情况（如第 0 列）

若主键藏在某个 <td> 里（如序号列），注意空格和换行：<font size="2"><pre class="brush:php;toolbar:false;">const key = row.cells[0].textContent.trim().replace(/\s+/g, ''); // 去空格换行</pre></font><p>也可用更健壮的方式，比如匹配数字 ID：</p> <font size="2"><pre class="brush:php;toolbar:false;">const match = row.cells[0].textContent.match(/ID:\s*(\d+)/); const key = match ? match[1] : null;</pre></font><p>不复杂但容易忽略主键提取的准确性——务必先 console.log 几行验证 key 是否获取正确，再执行过滤。</p> </td>

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南