更改 tr 背景颜色无效问题

更改tr背景颜色无效问题

📃在更改tr背景颜色时，我们肯定是想要整行颜色改变，但有时会出现只有部分改变 或 全都不改变的情况

❗这时我们就需要去看一下自己是否在之前设计的 CSS 样式中已经给定了tr中的td或th背景色，如果已经给定，那再设置tr的背景色显然优先级是不够的

✅解决方法（目前所知两种）：

1. 先去掉原来td或th的背景色，使其背景透明，再设置tr的背景色，以达到通过tr改变整行背景色的目的
2. 直接更改td或th的背景色，以改变整行的背景色

💦具体问题案例

由于我在设置th时偷懒，将整个table的th进行了统一设置，所以就有了以下样式（👉🏻大家一定要以我为戒，不要偷懒）

我第一次想到的解决办法是将下面的th再单独设置一次空白背景色，这确实现在看来没什么问题，但却给我下面的操作带来了麻烦🤦🏻‍♀️

我想要一个鼠标经过每一行都会改变背景颜色以便提醒我看到的是哪一行的效果，就需要用到onmouseover和onmouseout事件，我当时只获取了所有tr，想着改变一行tr就肯定可以让整行颜色跟着改变了吧（👋🏻现在看来是我天真了），他只变成了这种后面一半有颜色的效果

在一番百度之后，我知道th有背景色再去改变tr是不行的，虽然这时候背景颜色属性已经设置进去了，然后我就只能在每个事件里利用循环再给每个th改变背景色（🧓🏻这看起来可太麻烦了，但也能实现效果）

    // 1.获取元素 获取的是 tbody 里面所有的行
    var trs = document.querySelector('tbody').querySelectorAll('tr');
    // 2.注册事件
    for (var i = 0; i < trs.length; i++) {
        trs[i].onmouseover = function () {
            this.style.backgroundColor = '#E6F3FC';
            for (var j = 0; j < this.querySelectorAll('th').length; j++) {
                this.querySelectorAll('th')[j].style.backgroundColor = '#E6F3FC';
            }
        }
        trs[i].onmouseout = function () {
            this.style.backgroundColor = '#fff';
            for (var j = 0; j < this.querySelectorAll('th').length; j++) {
                this.querySelectorAll('th')[j].style.backgroundColor = '#fff';
            }
        }
    }

这时候终于可以实现效果了

但是灵机一动，我又想到一个简单的既可以继承原有th 的CSS属性，又不用再单独设置背景色的办法

那就是：

直接在原有tbody中th的CSS里设置

background: inherit;

让他的背景色继承他父级的tr，因为他父级的tr原本就没有背景色，那么tr的颜色怎么改变，th就跟着变了

感谢观看到这里，辛苦啦🤞🏻