具有背景颜色的制表符单元格格式删除了悬停和选中的背景

Question

这有点类似于 - 但不完全相同。

需要动态更改 table 颜色（用户特定）。因此，我覆盖了 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仅在光标位于冻结单元格上时有效

Answer 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);
        });
    },

    /* ...*/

}

Answer 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);
}

具有背景颜色的制表符单元格格式删除了悬停和选中的背景

Tabulator cell formatting with background-color removes background for hover and selected

javascript

css

tabulator