如何使用jQuery突出顯示某些錶行？

我CodePen： http://codepen.io/leongaban/pen/nJzcv 如何使用jQuery突出顯示某些錶行？

所以我發現錶行突出的CSS-技巧的this great example。（Demo）

但是我不想強調我top row，我試圖目標只有某些TD與類名，但依然沒有接近:(

你會如何去了解呢？

enter image description here

//Row Highlighting 
$("table .active").delegate('td','mouseover mouseout', function(e) { 
     if (e.type == 'mouseover') { 
      console.log('hovering over row'); 
      $(this).parent().addClass("gray-rollover"); 
     } 
     else { 
      $(this).parent().removeClass("gray-rollover"); 
     } 
    }); 

// Works but highlights all Rows 
/*$("table").delegate('td','mouseover mouseout', function(e) { 
     if (e.type == 'mouseover') { 
      console.log('hovering over row'); 
      $(this).parent().addClass("gray-rollover"); 
     } 
     else { 
      $(this).parent().removeClass("gray-rollover"); 
     } 
    });*/

來源

2013-06-19 Leon Gaban

您可加入第一行圍繞table head和周圍的其他的表體：

<table cellpadding="12" cellspacing="1" border="1"> 
    <thead><tr> 
    <th>Icon</th> 
    <th class="data-td data-name">Name</th> 
    <th class="data-td data-career">Career</th> 
    <th class="data-td data-company">Company</th> 
    </tr></thead> 
    <tbody><tr> 
    <!-- more stuff --> 
    </tr></tbody> 
</table>

然後，你可以針對表身與你的JavaScript：

$("table > tbody .active").on('mouseover mouseout','td', function(e) {

雖然可以只用JS就可以做到這一點，而且不會改變HTML，在這種情況下，我更喜歡HTML更改，因爲它在語義上是正確的 - 您的第一行不是內容，因此應該作爲標頭單獨標記。

來源

2013-06-19 21:16:42 Blazemonger

的一種方法是使用not()選擇：

$(this).parent().not('tr:first-child').addClass("gray-rollover");

這會將該類添加到除mouseover上的第一行以外的所有行。

CodePen here.

來源

2013-06-19 21:14:00 lifetimes

爲什麼不能簡單地用CSS：

tr:nth-child(even) td { 
    background: #333; 
    color: #fff; 
}

所以你要在鼠標懸停時的樣式，除了第一行。然後：

tr:hover td { 
    background: #333; 
    color: #fff; 
} 

tr:first-child:hover td{ 
    background: none; 
    color: #333 
}

或者我在這裏錯過了什麼？

來源

2013-06-19 21:14:38

你看過他試圖複製的演示嗎？ – Blazemonger

@Blazemonger：它看起來像OP只想突出顯示行。這可能與CSS –

如何使用jQuery突出顯示某些錶行？

回答

相關問題