本文介绍如何使用 jQuery 为具有相同类名的多个表格单元格（td）统一绑定鼠标悬停事件，动态设置 title 属性以显示完整文本内容，解决因 ID 重复导致仅首行生效的问题。
本文介绍如何使用 jquery 为具有相同类名的多个表格单元格（td）统一绑定鼠标悬停事件，动态设置 `title` 属性以显示完整文本内容，解决因 id 重复导致仅首行生效的问题。
在实际 Web 开发中，常需在表格中展示长文本（如 ID、路径、JSON 片段等），但受限于列宽，内容被截断。此时通过 HTML 原生 title 属性实现 tooltip 是轻量、兼容性佳的方案。然而，若错误地使用 id="tooltipexcess" 为多个 <td> 设置唯一标识，将违反 HTML 规范（ID 必须全局唯一），导致 jQuery 选择器 $("#tooltipexcess") 仅匹配第一个元素——这正是原始代码仅对首行生效的根本原因。
✅ 正确做法是改用 class 实现多元素批量绑定：
<table class="table table-borderless table-sm table-limit-excess rounded mt-2">
<tbody>
<tr class="bg-primary text-white">
<th class="pl-2">Key</th>
<th class="pr-2">Data</th>
<th class="pr-2">Condition</th>
</tr>
<tr>
<td>12</td>
<td class="tooltipexcess">123456789012345, A123456789012345</td>
<td>Equal To</td>
</tr>
<tr>
<td>92</td>
<td class="tooltipexcess">322312323</td>
<td>Contains</td>
</tr>
<tr>
<td>230</td>
<td class="tooltipexcess">123233, 333, 3312213, 2132321, 3fsdff</td>
<td>Equal To</td>
</tr>
</tbody>
</table>
<script>
// ✅ 使用类选择器，为所有 .tooltipexcess 元素绑定事件
$(".tooltipexcess").on("mouseover", function () {
const $this = $(this);
// 仅当当前单元格内容被截断（可选优化：避免空 title）
if ($this.text().trim() && !$this.attr("title")) {
$this.attr("title", $this.text().trim());
}
});
</script>? 关键要点说明：
- 语义正确性：id 用于唯一标识，class 用于同类元素分组；此处应使用 class="tooltipexcess"。
-
事件委托更优方案（推荐用于动态表格）：若表格后续通过 JS 动态追加行，建议改用事件委托，确保新插入的 .tooltipexcess 单元格也自动生效：
$("tbody").on("mouseover", ".tooltipexcess", function () { $(this).attr("title", $(this).text().trim()); }); - 防重复设置：示例中增加了 !$this.attr("title") 判断，避免反复覆盖已有 title（例如服务端已预设提示文案）。
- 无障碍友好：原生 title 属于辅助技术可读属性，无需额外 ARIA 标注；如需更丰富样式或交互，可升级为 Bootstrap Tooltip 或 Tippy.js 等专业库。
综上，从 id 到 class 的转变不仅是语法修正，更是遵循 Web 标准、保障可维护性与扩展性的必要实践。
