click event on table row results in non working links inside
I have a simple table here
-
<table>
<tbody>
<tr ><td name="cell_1">cell_1</td>
<td name="cell_2">cell_2</td>
<td name="cell_3">cell_3</td>
<td class="actions" nowrap="1"">
<a href="/link1" > link1</a>
<a href="/link2" > link 2</a>
</td>
</tr>
</table>
Here is my jquery, it takes care of a nice hover effect and changes css when I click on a row. But, because of this click(onmousedown) the href links in the last td don't work anymore. I'm sure there is a easy solution to this but I'm a bit in the dark at the moment. Can someone give me a hint?
-
$(document).ready(function(){
var $row_even = $("tbody:not([@class=section]) tr:even");
var $row_odd = $("tbody:not([@class=section]) tr:odd");
var $row_all = $("tbody:not([@class=section]) tr");
var $td_actions = $("tbody:not([@class=section]) td:(@class=action)");
$row_even.addClass("even");
$row_odd.addClass("odd");
$row_all.mouseover(function(){
if( $(this).is(".even") ){
$(this).removeClass("even");
$(this).addClass("overeven");
}else if ( $(this).is(".odd") ){
$(this).addClass("overodd");
}
}).mouseout(function () {
if ( $(this).is(".overeven") ){
$(this).removeClass("overeven");
$(this).addClass("even");
}else if ( $(this).is(".overodd") ){
$(this).removeClass("overodd");
}
}
);
$row_all.mousedown(function(){
if( $(this).is(".overeven") ){
$(this).removeClass("overeven");
$(this).addClass("overevenclick");
}else if( $(this).is(".overodd") ){
$(this).removeClass("overodd");
$(this).addClass("overoddclick");
}
}).mouseup(function(){
if( $(this).is(".overevenclick") ){
$(this).removeClass("overevenclick");
$(this).addClass("overeven");
}else if( $(this).is(".overoddclick") ){
$(this).removeClass("overoddclick");
$(this).addClass("overodd");
});
}
});