如何用jQuery为Bootstrap表格行添加类并在重载后保留高亮状态

没问题，这个需求很常见，咱们只需要借助localStorage来持久化选中的名称，页面重载后再读取它来恢复高亮状态就行。另外我发现你代码里有个小细节需要调整——循环生成的<td>用了相同的id="object-name-column"，这不符合HTML规范（id必须唯一），改成class会更稳妥。下面是调整后的完整解决方案：

1. 修改点击事件，持久化选中的名称 #

更新你的点击事件，把选中的名称同时存入localStorage，这样页面刷新后数据不会丢失：

$('body').on('click', '.name-row', function (event) {
  // 为当前选中行添加高亮，移除其他行的高亮
  $(this).addClass('bg-info text-light').siblings().removeClass('bg-info text-light');
  // 获取当前行的名称（注意把id改成class了）
  selectedName = $(this).find(".object-name-column").text().trim(); // 加trim避免空格干扰匹配
  // 将选中的名称存入localStorage
  localStorage.setItem('selectedObjectName', selectedName);
});

2. 页面初始化时恢复高亮状态 #

在页面加载完成后，读取localStorage里保存的名称，找到对应的行并恢复高亮：

$(document).ready(function() {
  // 从localStorage读取之前选中的名称
  const savedName = localStorage.getItem('selectedObjectName');
  if (savedName) {
    // 遍历所有行，找到匹配名称的行并添加高亮
    $('.name-row').each(function() {
      const currentName = $(this).find(".object-name-column").text().trim();
      if (currentName === savedName) {
        $(this).addClass('bg-info text-light');
        // 同步更新全局变量selectedName
        selectedName = savedName;
        return false; // 找到匹配项后退出循环，提升效率
      }
    });
  }
});

3. 调整HTML中的td属性 #

把原来重复的id改成class，避免HTML结构错误：

<script th:inline="javascript"> /*<![CDATA[*/ var selectedName; /*]]>*/ </script>
<table class="table table-hover" id="my-table" style="cursor:pointer">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Date</th>
</tr>
</thead>
<tbody>
<tr class="name-row" th:each="object:${objects}">
<td class="object-name-column" th:text="${object.name}"></td>
<td class="date-column" th:text="${object.date}"></td>
</tr>
</tbody>
</table>

额外说明 #

• 如果需要清除高亮状态（比如用户重置操作），可以调用localStorage.removeItem('selectedObjectName')，然后手动移除所有行的bg-info text-light类即可。
• trim()方法用来去除名称前后的空格，避免因文本格式化导致匹配失败。

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