带有背景颜色的制表符单元格格式会删除悬停的背景并选中答案

【问题标题】：Tabulator cell formatting with background-color removes background for hover and selected带有背景颜色的制表符单元格格式会删除悬停的背景并选中
【发布时间】：2021-09-16 13:18:40
【问题描述】：

这有点类似于Tabulator row formatting removes hover effect, while cell formatting doesn't - 但不完全一样。

需要动态更改表格颜色（用户特定）。因此，我覆盖了工作正常的 Tabulator css 类。但是，当我使用 cellFormater 更改单元格的背景色时，悬停背景色和所选背景色都不起作用。

为了更清楚（希望如此）：我想为冻结列和具有特定值的单元格设置背景色。我想保留选定的背景颜色和悬停背景颜色。

由于我是 CSS 新手，如果有人能帮我解决这个问题，我将不胜感激。

我修改了另一个线程中的Codesandbox 以进行演示。绿色和黄色单元格用 cellFormatter 着色。第 3 行和第 4 行被选中，应该是粉红色的。对于完整的行，悬停背景色应为黑色。如您所见，文本颜色也会出现问题。 Screenshot

尝试使用这些类失败（！important 是一次绝望的尝试）：


.tabulator-row.tabulator-selected {
  background-color: rgb(250, 34, 203) !important;
}

.tabulator-row:hover {
  background-color: rgb(0, 0, 0) !important;
  color: rgb(0, 119, 255) !important;
  font-weight: 900;
}

 .tabulator-frozen:hover {
  background-color: rgb(238, 5, 5) !important;
  color: rgb(154, 195, 243) !important;
}

旁注：

设置 .tabulator-row .tabulator-cell:hover 适用于单个单元格
设置.tabulator-row .tabulator-frozen:hover 仅在光标位于冻结单元格上时有效

【问题讨论】：

刚刚注意到，如果我通过 rowFormatter: row => { row.getCells()[3].getElement().style.backgroundColor = "red"} 设置单元格背景色，行为是相同的

标签： javascript css tabulator

【解决方案1】：

我找到了一个对我来说似乎有点老套的解决方案，但现在一切正常。（右边的冻结列除外）在选择和鼠标悬停时，我将所有单元格的背景颜色设置为透明并备份计算的背景颜色。在取消选择和鼠标悬停时，我将背景颜色重置为备份颜色。

我知道这些样式更改会覆盖 css，这肯定是右冻结列在选择和悬停时为灰色的原因...

Codesandbox with changes

我添加了处理程序

rowMouseOver --> 将背景颜色保存到单元格属性并设置为透明
rowSelected --> 还将背景颜色保存到单元格属性并设置为透明
rowMouseOut --> 如果未选择行，则从属性设置背景颜色并删除备份属性
rowDeselected --> 从属性设置背景颜色


function backupColorAndSetTransparent(cellEl) {
    let cellCol = window
        .getComputedStyle(cellEl, null)
        .getPropertyValue("background-color");

    if (cellCol && cellCol !== "rgba(0, 0, 0, 0)") {
        var attribute = document.createAttribute("backupCellBackColor");
        attribute.value = window
            .getComputedStyle(cellEl, null)
            .getPropertyValue("background-color");
        cellEl.setAttributeNode(attribute);
    }

    cellEl.style.backgroundColor = "rgba(0, 0, 0, 0)";
}

var table = new Tabulator("#example-table", {
    data: data,
    selectable: true,

    rowMouseOver: function (e, row) {
        row.getCells().forEach((cell) => {
            let cellEl = cell.getElement();
            backupColorAndSetTransparent(cellEl);
        });
    },

    rowMouseOut: function (e, row) {
        row.getCells().forEach((cell) => {
            let cellEl = cell.getElement();

            if (cellEl.getAttribute("backupCellBackColor") && !row.isSelected()) {
                cellEl.style.backgroundColor = cellEl.getAttribute(
                    "backupCellBackColor"
                );
            }

            if (!row.isSelected()) {
                cellEl.removeAttribute("backupCellBackColor");
            }
        });
    },

    rowDeselected: function (row) {
        row.getCells().forEach((cell) => {
            let cellEl = cell.getElement();

            if (cellEl.getAttribute("backupCellBackColor")) {
                cellEl.style.backgroundColor = cellEl.getAttribute(
                    "backupCellBackColor"
                );
            }
        });
    },

    rowSelected: function (row) {
        row.getCells().forEach((cell) => {
            let cellEl = cell.getElement();
            backupColorAndSetTransparent(cellEl);
        });
    },

    /* ...*/

}

【讨论】：

【解决方案2】：

使用正确的 CSS 真的很容易！

将.tabulator-cell 附加到.tabulator-row.tabulator-selected 和.tabulator-row.tabulator-selected 就可以了！

Codesandbox

.tabulator-row.tabulator-selected .tabulator-cell{
    background-color: rgba(247, 101, 213, 0.8) !important;
}

.tabulator-row:hover {
    background-color: rgb(0, 0, 0) !important;
    color: rgb(0, 119, 255) !important;
    font-weight: 900;
}


.tabulator .tabulator-row.tabulator-selectable:hover .tabulator-cell{
    background-color: rgba(238, 5, 5, 1) !important;
    color: rgb(154, 195, 243);
}

【讨论】：