使用JavaScript与Bootstrap 5修改表格类样式未生效问题

核心问题：错误地将table-dark类添加到了tbody元素上 #

Bootstrap 5的table-dark样式是专为<table>标签设计的，只有给table元素添加该类，才能让整个表格（包括表头和主体行）统一应用深色样式。你的代码中getElementById("user_data")获取的是tbody元素而非table元素，导致仅表头（属于table的thead子元素）继承了深色样式，主体行无法匹配样式规则。

其他代码问题及修正 #

1. 表格行删除逻辑错误
   原循环删除方式会跳过部分元素（删除索引i的元素后，后续元素索引前移，下一次循环i递增会跳过新的索引i元素），正确的清空方式是直接移除所有子节点：

var selectobj = document.getElementById("user_data");
// 替换原有循环删除代码
while (selectobj.firstChild) {
    selectobj.removeChild(selectobj.firstChild);
}

2. 多余且无效的tr样式设置
   你尝试给每个tr添加table-dark类，但jQuery选择器缺少ID前缀#，导致这行代码完全不生效，且这步操作本身多余（table-dark只需加在table上即可），直接删除以下代码：

$("log-tr-"+String(parseInt(key)+1)).addClass('table-dark');

3. 错误的td属性设置
   scope='col'是给thead中的th元素使用的属性，td不需要该属性，删除所有td的scope设置代码：

td_temp.setAttribute('scope','col');

最终修正后的关键代码片段 #

确保你获取的是table元素来添加Bootstrap类：

// 确认table的ID为user_data，若之前绑定在tbody上需调整HTML结构或选择器
var table_user = document.getElementById("user_data");
table_user.setAttribute('class',"table table-dark table-striped table-hover table-bordered");

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