如何通过暗黑模式切换按钮修改表格的Bootstrap类

你只需要在现有暗黑模式切换逻辑中，添加表格类的切换操作即可，具体实现如下：

1. 获取表格元素：通过ID选中目标表格
2. 根据切换状态替换Bootstrap类：开启暗黑模式时移除table-striped并添加table-dark；关闭时反向操作

完整的JavaScript代码：

const chk = document.getElementById('chk');
const table = document.getElementById('myTable');

chk.addEventListener('change', () => {
    // 保留原有body暗黑类切换逻辑
    document.body.classList.toggle('dark');
    
    // 处理表格类切换
    if (chk.checked) {
        // 开启暗黑模式：替换为深色表格类
        table.classList.remove('table-striped');
        table.classList.add('table-dark');
    } else {
        // 关闭暗黑模式：恢复浅色表格类
        table.classList.remove('table-dark');
        table.classList.add('table-striped');
    }
});

补充说明 #

Bootstrap的table-dark自带深色背景的条纹样式，无需和table-striped同时使用，直接替换类就能达到你需要的暗黑模式表格效果。另外要确保这段脚本放在表格元素之后，或者包裹在DOMContentLoaded事件中，避免出现无法获取表格元素的问题。

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