jQuery 第一个 child 第 n 个 child

标签 jquery

我有下面的当前代码来突出显示顶行和日期以及鼠标所在的 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/

相关文章:

jQuery AJAX 单文件上传

html - 锁定 HTML 选择元素,允许在提交时发送值

javascript - 慢速 JQuery 函数

jquery - 为什么我的 CSS 会被覆盖?

javascript - 有没有办法使用 JS 变量作为输入而不是 jquery 选择器 "#id"?

jquery - 停止html5音频并重新开始播放的问题

javascript - 如何在网站上节省值(value)?

php - 单击单个图像的不同部分以触发 jquery 事件(基本上在单击时显示文本)

php - Azure 计费 API javascript 返回 CORS 错误,但使用 postman 时不会返回

javascript 中的 php 计数器不起作用