CSS .hover on tr，第一个TD在Chrome中有行量

Question

我的表格格式如下：

TR - ＆gt; TD rowspan = 2 - ＆gt; TD - ＆gt; TD

TR - ＆gt; - ＆GT; TD - ＆gt; TD

TR - ＆gt; TD rowspan = 2 - ＆gt; TD - ＆gt; TD

TR - ＆gt; - ＆GT; TD - ＆gt; TD

重复........

在悬停任何TD时，TR会突出显示，如果任一行中的TD突出显示，则带有Rowspan的TD会全部突出显示。

像这样：

向下移动表格时，可以正确应用/删除CSS。然而，当向上移动表格时，CSS不会从带有rowspan

的TD的下半部分移除

示例：

这只发生在chrome;

目前我唯一的CSS是

.hover{
    background-color: #1797C0 !important;
}

JS就是这个：

                $("[id$=user_data] td").hover(function() {

                  $el = $(this);

                  $el.parent().addClass("hover");

                  if ($el.parent().has('td[rowspan]').length == 0)

                    $el
                      .parent()
                      .prevAll('tr:has(td[rowspan]):first')
                      .find('td[rowspan]')
                      .addClass("hover");

                }, function() { 

                  $el
                    .parent()
                    .removeClass("hover")
                    .prevAll('tr:has(td[rowspan]):first')
                    .find('td[rowspan]')
                    .removeClass("hover");

                });

当TR / TD不再悬停时，Chrome中是否存在导致颜色仍然存在的问题？使用开发人员工具，TD没有类.hover，但颜色仍然存在。

所以我的问题是：

我的JS中的位置是没有为rowSpan第二行的TD部分重置CSS背景颜色

我希望它突出显示整个第一个单元格（带有rowspan）和第1行的其余部分悬停在第1行的td上。当在第2行中的任何TD中悬停时，突出显示第1行第1行中的整个TD < / p>

重复行3-4和5-6，依此类推，删除前一行/ td（s）中的突出显示。

无论在表格中向上或向下移动

它目前适用于Safari和Firefox，但只有在表格中向上移动时，Chrome才会将突出显示保留在TD的底部并显示行数。

Answer 1

我也遇到了这个问题。这是我对本机JS的jquery代码的端口。 希望它有帮助=）

(function () {

    function findRowSpan(element) {
        var sibling = element;
        var rowspanFound = false;

        var rowSpanCols = [];

        while (!rowspanFound) {

            var cols = sibling.getElementsByTagName("td");
            for (var i = 0; i < cols.length; i++) {
                var col = cols[i];
                if (col.hasAttribute('rowspan')) {
                    rowSpanCols.push(col);
                }
            }
            rowspanFound = rowSpanCols.length > 0;
            sibling = sibling.previousElementSibling;
        }
        return rowSpanCols;

    }

    function doForAll(array,func) {
        for (var j = 0; j < array.length; j++) {
            var item = array[j];
            func(item);
        }
    }

    function rowSpanHover(element,func) {
        var parent = element.parentNode;
        func(parent);

        var cols = findRowSpan(parent);
        doForAll(cols, function (col) {
            func(col);
        });
    }

    function addClass(element,cssClass) {
        element.className = element.className +" "+ cssClass;
    }

    function removeClass(element, cssClass) {
        element.className = element.className.replace(cssClass, "").trim();
    }

    return {

        setup: function () {
            var cells = document.getElementsByTagName('td');

            for (var i = 0; i < cells.length; i++) {
                var cell = cells[i];

                cell.addEventListener("mouseover", function () {
                    rowSpanHover(this, function(element) {
                        addClass(element, "hover");
                    });
                });

                cell.addEventListener("mouseout", function () {
                    rowSpanHover(this, function (element) {
                        removeClass(element, "hover");
                    });

                });
            }
        }
    };
})();