jquery - 将鼠标悬停在表列、行和标题列上

Question

我有一个带有 jQ​​uery 函数的表格，用于将鼠标悬停在行/列上，您可以在这里看到它:http://jsfiddle.net/v0r9kjq7/这是代码:

HTML:

<table>
<thead>
    <tr>
        <th>Title 1</th>
        <th>Title 2</th>
        <th>Title 1</th>
        <th>Title 2</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Content here</td>
        <td>Content here</td>
        <td>Content here</td>
        <td>Content here</td>
    </tr>
    <tr>
        <td>Content here</td>
        <td>Content here</td>
        <td>Content here</td>
        <td>Content here</td>
    </tr>
    <tr>
        <td>Content here</td>
        <td>Content here</td>
        <td>Content here</td>
        <td>Content here</td>
    </tr>
    <tr>
        <td>Content here</td>
        <td>Content here</td>
        <td>Content here</td>
        <td>Content here</td>
    </tr>
    <tr>
        <td>Content here</td>
        <td>Content here</td>
        <td>Content here</td>
        <td>Content here</td>
    </tr>
    <tr>
        <td>Content here</td>
        <td>Content here</td>
        <td>Content here</td>
        <td>Content here</td>
    </tr>
</tbody>
</table>

CSS:

table {
width: 100%;
border-spacing: 0;
vertical-align: top;
table-layout: auto;
}
table tr.hover td {
cursor: pointer;
background-color: rgba(30, 138, 228, 0.15);
}
table td {
padding: 0 10px;
line-height: 30px;
background-color: inherit;
color: #3c3c3c;
}
tr:nth-child(even) {
background-color: #f0f0f0;
}
tr:nth-child(odd) {
background-color:#fff;
}
tbody tr:hover, tbody td.hover {
background-color: rgba(30, 138, 228, 0.15) !important;
}
td:hover {
background-color: #fff !important;
color: #1e8ae4;
cursor: pointer;
}
tbody td.hover:hover {
background-color: #fff !important;
}
table thead th {
background-color: #f0f0f0 !important;
}
table thead th {
padding: 20px 10px 20px 10px;
font-weight: bold;
color: #3c3c3c;
vertical-align: top;
text-align: left;
}

JQUERY:

$('table td').hover(

function () {
$('table td:nth-child(' + ($(this).index() + 1) + ')').addClass('hover');
},

function () {
$('table td:nth-child(' + ($(this).index() + 1) + ')').removeClass('hover');
});

我应该如何更改此脚本，以便它也考虑到表格标题，以便标题列也被悬停？

非常感谢所有帮助!

Answer 1

您只需要更新选择器以包含 th 元素:

$('table td, table th').hover(function () {
    // rest of your code...
});

Updated fiddle