与rowspan和盘旋的表

Question

我遇到了很多td rowspan的表格。我构建了它，混合了其他帖子中的一些想法。

鼠标悬停时，我需要暂停与办公室相关的信息。例如，如果我选择巴黎，他的大陆，国家和其他相关信息应该是红色的。

正如你可以在小提琴中看到的那样，除了德国和加拿大的行外，它的工作正常。

https://jsfiddle.net/ppgoecjj/

HTML：

<table class="myTable">
    <tbody>
        <tr>
            <td rowspan="4">
                North America
            </td>
            <td rowspan="4">
                4
            </td>
            <td rowspan="2">
                USA
            </td>
            <td>
                Ohio
            </td>
            <td>
                Office A
            </td>
            <td rowspan="4">
                Open
            </td>
        </tr>
        <tr>
            <td>
                New York
            </td>
            <td>
                Office A
            </td>
        </tr>
        <tr>
            <td rowspan="2">
                Canada
            </td>
            <td>
                Toronto
            </td>
            <td>
                Office A
            </td>
        </tr>
        <tr>           
            <td>
                Ottawa
            </td>
            <td>
                Office A
            </td>
        </tr>
        <tr>
            <td rowspan="3">
                Europe
            </td>
            <td rowspan="3">
                3
            </td>                
            <td>
                France
            </td>
            <td>
                Paris
            </td>
            <td>
                Office A
            </td>
            <td rowspan="3">
                Open
            </td>
        </tr>
        <tr>
            <td rowspan="2">
                Germany
            </td>            
            <td>
                Berlin
            </td>
            <td>
                Office A
            </td>
        </tr>
        <tr>
            <td>
                Munich
            </td>
            <td>
                Office A
            </td>
        </tr>
        <tr>
            <td>
                South America
            </td>
            <td>
                1
            </td>
            <td>
                Argentina
            </td>
            <td>
                Buenos Aires
            </td>
            <td>
                Office A
            </td>
            <td>
                Open
            </td>
        </tr>
        <tr>
            <td rowspan="2">
                Asia
            </td>
            <td rowspan="2">
                2
            </td>
            <td rowspan="2">
                China
            </td>
            <td>
                Shanghai
            </td>
            <td>
                Office A
            </td>
            <td rowspan="2">
                Open
            </td>                
        </tr>
        <tr>
            <td>
                Beijing
            </td>
            <td>
                Office A
            </td>

        </tr>
    </tbody>
</table>

CSS：

body
    {
        padding: 50px;
    }
    table
    {
        width: 100%;
        border-collapse: collapse;
    }
    td, th
    {
        padding: 20px;
        border: 1px solid black;
    }
    .hover
    {
        background: red;
    }

JQUERY：

$(function () {
        $("td").hover(function () {
            $el = $(this);
            $el.parent().addClass("hover");
            var tdIndex = $('tr').index($el.parent());
            if ($el.parent().has('td[rowspan]').length == 0) {
                $el.parent().prevAll('tr:has(td[rowspan]):first')
                        .find('td[rowspan]').filter(function () {
                            return checkRowSpan(this, tdIndex);
                        }).addClass("hover");
            }
        }, function () {
            $el.parent()
    .removeClass("hover")
    .prevAll('tr:has(td[rowspan]):first')
    .find('td[rowspan]')
    .removeClass("hover");
        });
    });
    function checkRowSpan(element, pIndex) {
        var rowSpan = parseInt($(element).attr('rowspan'));
        var cIndex = $('tr').index($(element).parent());
        return rowSpan >= pIndex + 1 || (cIndex + rowSpan) > pIndex;
    }