Bootstrap table-hover类失效：是否与jQuery页面加载填充数据有关？

嘿，你猜的没错，用jQuery动态填充表格数据确实有可能导致table-hover的悬停效果失效！咱们一步步来排查和解决这个问题：

1. 先确认动态添加的行结构是否正确 #

Bootstrap的table-hover样式是针对<tbody>内的<tr>生效的，所以你要确保jQuery填充数据时，是把行添加到<tbody>标签里，而不是直接替换整个表格的内容。

比如错误的写法（可能会丢失<tbody>结构）：

// 不推荐：直接替换整个table的HTML
$('#currency').html('<tr><td>2024-05-20</td><td>150</td>...</tr>');

正确的写法（定位到<tbody>操作）：

// 先找到表格的tbody元素
const tbody = $('#currency tbody');
// 清空原有内容（可选）
tbody.empty();
// 循环生成数据行并追加
yourDataArray.forEach(item => {
  const row = $('<tr>')
    .append($('<td>').text(item.date))
    .append($('<td>').text(item.jpy))
    .append($('<td>').text(item.usd))
    // 其他列依次添加...
  tbody.append(row);
});

2. 检查是否有自定义CSS覆盖了Bootstrap样式 #

有时候我们自己写的CSS会无意中覆盖Bootstrap的默认样式，比如：

/* 这种写法会直接覆盖table-hover的悬停效果 */
tr:hover {
  background-color: #fff !important;
}

如果有类似的代码，要么去掉!important，要么调整选择器优先级，确保Bootstrap的样式能生效：

/* 用更精准的选择器，让Bootstrap的样式优先级更高 */
.table-hover tbody tr:hover {
  background-color: #f8f9fa; /* 这是Bootstrap默认的hover背景色 */
}

3. 确保Bootstrap CSS加载时机正确 #

要保证Bootstrap的CSS文件在你填充数据之前就已经加载完成，最好放在<head>标签里。如果是异步加载CSS，可能会导致动态添加的行没来得及应用样式。

4. 验证AJAX异步加载的情况 #

如果你的数据是通过AJAX获取的，一定要在数据返回后再执行填充表格的代码，比如放在AJAX的success回调里：

$(document).ready(() => {
  $.ajax({
    url: 'your-data-api-url',
    method: 'GET',
    success: (data) => {
      // 这里再执行填充表格的逻辑
      const tbody = $('#currency tbody');
      tbody.empty();
      data.forEach(item => {
        const row = $('<tr>')
          .append($('<td>').text(item.date))
          .append($('<td>').text(item.jpy))
          // 其他列...
        tbody.append(row);
      });
    }
  });
});

最后一步：用开发者工具排查 #

如果还是没生效，打开浏览器的开发者工具（F12），找到动态添加的<tr>元素，查看它的hover样式：

• 如果.table-hover tbody tr:hover的样式存在但被划掉，说明有其他样式覆盖了它；
• 如果这个样式根本不存在，那就是Bootstrap的CSS没正确加载。

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