我有下面的当前代码来突出显示顶行和日期以及鼠标所在的 html 表格的单元格。我对 jQuery 还很陌生,对第一个子/第 n 个子还没有很好的掌握。我不想突出显示项目#,而是想突出显示产品名称(列中的第二个)。我知道我必须编辑第一个子级 nth-child 的 addClass 和 removeClass 行,但我不确定如何突出显示当前突出显示的单元格下方的单元格。预先感谢您的帮助!
$("td").hover(function(){
$(this).addClass('highlight').siblings().first().addClass('highlight');
$('tr:first-child th:nth-child(' + ($(this).index() + 1) + ')').addClass('highlight');
},function(){
$(this).removeClass("highlight").siblings().first().removeClass('highlight');
$('tr:first-child th:nth-child(' + ($(this).index() + 1) + ')').removeClass('highlight');
});
table,th, td {
border: 1px solid black;
border-collapse: collapse;
font-size: 90%;
}
th, td {
padding:8px;
}
td {
text-align: center;
}
table {
margin:0 auto;
}
td:click {
background-color: blue;
}
.highlight {
background-color:#E0E0E0;
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table><tr><th>Item #</th><th>1234567</th><th>7654321</th></tr><tr><th>Product</th><th><u>22oz Dark</u></th><th><u>12ct 4oz Dark</u></th></tr><tr><th>2016-01-01</th><td>9785</td><td>2478</td></tr><tr><th>2016-01-02</th><td>8754</td><td>2136</td></tr><tr><th>2016-01-03</th><td>13587</td><td>2203</td></tr><tr><th>2016-01-04</th><td>14111</td><td>3297</td></tr><tr><th>2016-01-05</th><td>13212</td><td>3101</td></tr><tr><th>2016-01-06</th><td>16335</td><td>3299</td></tr><tr><th>2016-01-07</th><td>15421</td><td>3100</td></tr></table>
最佳答案
I want to highlight the Product Name (second th down in column)
我认为下面的代码片段就是您想要的,您可以使用 :eq() selector
来完成此操作:
//Add the highlight using
$('tr:eq(1) th:eq('+$(this).index()+')').addClass('highlight');
//Then remove the highlight using
$('tr:eq(1) th:eq('+$(this).index()+')').removeClass('highlight');
tr:eq(1)
将获得第二行,因为 :eq()
是基于 0 的,th:eq('+$(this ).index()+')
将根据悬停的 td
索引选择第一个或第二个 th
。
希望这有帮助。
$("td").hover(function(){
$(this).addClass('highlight').siblings().first().addClass('highlight');
$('tr:first-child th:nth-child(' + ($(this).index() + 1) + ')').addClass('highlight');
$('tr:eq(1) th:eq('+$(this).index()+')').addClass('highlight');
},function(){
$(this).removeClass("highlight").siblings().first().removeClass('highlight');
$('tr:first-child th:nth-child(' + ($(this).index() + 1) + ')').removeClass('highlight');
$('tr:eq(1) th:eq('+$(this).index()+')').removeClass('highlight');
});
table,th, td {
border: 1px solid black;
border-collapse: collapse;
font-size: 90%;
}
th, td {
padding:8px;
}
td {
text-align: center;
}
table {
margin:0 auto;
}
td:click {
background-color: blue;
}
.highlight {
background-color:#E0E0E0;
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table><tr><th>Item #</th><th>1234567</th><th>7654321</th></tr><tr><th>Product</th><th><u>22oz Dark</u></th><th><u>12ct 4oz Dark</u></th></tr><tr><th>2016-01-01</th><td>9785</td><td>2478</td></tr><tr><th>2016-01-02</th><td>8754</td><td>2136</td></tr><tr><th>2016-01-03</th><td>13587</td><td>2203</td></tr><tr><th>2016-01-04</th><td>14111</td><td>3297</td></tr><tr><th>2016-01-05</th><td>13212</td><td>3101</td></tr><tr><th>2016-01-06</th><td>16335</td><td>3299</td></tr><tr><th>2016-01-07</th><td>15421</td><td>3100</td></tr></table>
关于jQuery 第一个 child 第 n 个 child ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40304802/