Question

我有下面的当前代码，以突出显示顶行和日期以及鼠标结束的html表格的单元格。我仍然是jQuery的新手，并且没有很好地掌握第一个孩子/第n个孩子。而不是突出显示项目＃我想突出显示产品名称（列中的第二个）。我知道我必须编辑first-child 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>

Answer 1

您只需稍微更新jQuery选择器，以定位表的第二行而不是第一行：

$("td").hover(function(){

    $(this).addClass('highlight').siblings().first().addClass('highlight');

    $('tr:nth-child(2) th:nth-child(' + ($(this).index() + 1) + ')').addClass('highlight');


},function(){

    $(this).removeClass("highlight").siblings().first().removeClass('highlight');

    $('tr:nth-child(2) th:nth-child(' + ($(this).index() + 1) + ')').removeClass('highlight');

});

Answer 2

我更新了你的jQuery代码并使它更清晰并修复了你的问题。

为此，我使用了内部jQuery函数，如.eq()（类似于CSS :nth-child）来解决它。

$("td").hover(function(){
    $(this).addClass('highlight').siblings().first().addClass('highlight');
    $('tr').eq(1).children('th').eq($(this).index()).addClass('highlight');


},function(){
    $(this).removeClass("highlight").siblings().first().removeClass('highlight');
    $('tr').eq(1).children('th').eq($(this).index()).removeClass('highlight');

});

Answer 3

我想突出显示产品名称（列中的第二个）

我认为下面的代码段是您要查找的内容，您可以使用 :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()+')将根据悬停的th索引选择第一行或第二行td

希望这有帮助。

＆＃13;

$("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');
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 4

见下面的代码。您只需使用Table Type Variable，就会突出显示流行的prev()

td

$("td").hover(function(){
                                
                $(this).addClass('highlight').siblings().first().addClass('highlight');
                
                $('tr:nth-child(n+2) th:eq('+$(this).index()+')').addClass('highlight');
	                       
                
            },function(){
                 $(this).removeClass('highlight').siblings().first().removeClass('highlight');
               
                
                $('tr:nth-child(n+2) 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;
}

jQuery第一个孩子nth-child

4 个答案: