jQuery: Selecting specific closest / sibling row above the current
What have to be changed to have the TD cells with class "img" also highlighted, when the mouse goes over C,D,E & F (Pic 1 is highlighted) and K & L (Pic 3 is highlighted) - not 开发者_JAVA百科only over the "first row" where the "rowspan" is defined (A,B,G,H & J)?
<table class="stripeMe" border="1">
<tr class="row1">
<td rowspan="3" class="img">Pic 1</td>
<td>- A -</td>
<td>- B -</td>
</tr>
<tr>
<td>- C -</td>
<td>- D -</td>
</tr>
<tr>
<td>- E -</td>
<td>- F -</td>
</tr>
<tr class="row1">
<td rowspan="1" class="img">Pic 2</td>
<td>- G -</td>
<td>- H -</td>
</tr>
<tr class="row1">
<td rowspan="2" class="img">Pic 3</td>
<td>- I -</td>
<td>- J -</td>
</tr>
<tr>
<td>- K -</td>
<td>- L -</td>
</tr>
</table>
CSS
tr.over td {
background-color: #f70;
}
jQuery
$(document).ready(function(){
$(".stripeMe tr").mouseover(function() {
$(this).addClass("over");}).mouseout(function(){
$(this).removeClass("over");});
});
Code example to try: http://jsfiddle.net/9krDS/
Try this
$(document).ready(function(){
$(".stripeMe").delegate("td", "mouseover", function() {
if($(this).closest("tr").hasClass("row1")){
$(this).closest("tr").find(".img").addClass("over");
}
else{
var tr = $(this).closest("tr");
while(!tr.hasClass("row1")){
tr = tr.prev("tr");
}
tr.find(".img").addClass("over");
}
})
.delegate("td", "mouseout", function(){
$(this).closest(".stripeMe").find(".img").removeClass("over");
});
});
精彩评论