使用tablesorter对表格进行排序，并在悬停偶数行和奇数行时更改背景

问题描述

$(document).ready(function () {
    $(".items").tablesorter();
    $('.items tr:even').addClass('ItemEvenRow');

    $('.items tr').hover(function () {
        $(this).addClass("ItemRowHover");
    }, function () {
        $(this).removeClass("ItemRowHover");
    });
});

HTML：

HTML :

<table class="items"> 
<thead> 
<tr class=""> 
    <th>Last Name</th> 
    <th>First Name</th> 
    <th>Email</th> 
    <th>Due</th> 
    <th>Web Site</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>Smith</td> 
    <td>John</td> 
    <td>[email protected]</td> 
    <td>$50.00</td> 
    <td>http://www.jsmith.com</td> 
</tr> 
<tr>  
    <td >Bach</td> 
    <td >Frank</td> 
    <td >[email protected]</td> 
    <td >$50.00</td> 
    <td >http://www.frank.com</td> 
</tr> 
<tr > 
    <td  >Doe</td> 
    <td >Jason</td> 
    <td>[email protected]</td> 
    <td  >$100.00</td> 
    <td>http://www.jdoe.com</td> 
</tr> 
<tr> 
    <td>Conway</td> 
    <td>Tim</td> 
    <td>[email protected]</td> 
    <td>$50.00</td> 
    <td>http://www.timconway.com</td> 
</tr> 
</tbody> 
</table> 

偶数行不拥有悬停，但只有奇数行。
同时需要同时以及奇数行在鼠标悬停时更改其背景。
这些标题应该没有任何变化。

The even rows do not possess the hover, but only the odd ones.Require both, even, as well as, odd rows to change their background on mouse-over.The headers should be as they are without any changes.

推荐答案

悬停在偶数行上不起作用，因为的css优先权。使选择器更具体，像这样（在前面添加 tr ; ）：

The hover isn't working on even rows because of css precedence. Make the selector more specific like this (add a tr in front; updated demo):

tr.ItemRowHover  {background-color:#A00000; }

这篇关于使用tablesorter对表格进行排序，并在悬停偶数行和奇数行时更改背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！