使表行可突出显示

Question

当鼠标悬停在表格的各行上时，我试图使它们具有突出显示的颜色，并且我希望整行都是可选择的。我试过了：

<tr onmouseover="ChangeColor(this, true);" 
              onmouseout="ChangeColor(this, false);" 
              onclick="DoNav('http://www.yahoo.com/');">

但问题是，我有一个外部css样式表来给这些单独的行着色，如果它们是在我的css样式表中指定的颜色，那么更改颜色的javascript代码就没有任何效果。因此，例如，我希望行通常是绿色的，并在悬停和单击时突出显示白色。如果我将颜色指定为绿色，则它始终是绿色，即使我将鼠标悬停在它们上面。如果我没有将颜色指定为绿色，那么javascript就可以工作了。这是相当烦人的。我也有交替排列的行的颜色。

有人能帮我找到一个简单的解决方案吗？

下面是我用于onmousehover和onmouseclick的javascript函数：

function ChangeColor(tableRow, highLight)
{
    if (highLight)
    {
      tableRow.style.backgroundColor = '#89ae37';
    }
    else if (this.class == alt)
    {
        tableRow.style.backgroundColor = '#EAF2D3';
    }   
    else
    {
        tableRow.style.backgroundColor = '#A7C942';
    }
}

function DoNav(theUrl)
{
  document.location.href = theUrl;
}

Answer 1

如果您在样式表中放入如下内容，则可以在不使用JS的情况下实现悬停效果：

tr:nth-child(odd) { background-color : #EAF2D3; }
tr:nth-child(even) { background-color : #A7C942; }
tr:hover { background-color : #89ae37; }
​

演示：http://jsfiddle.net/nnnnnn/zHgsf/

请注意，您甚至不需要在交替行上指定class="alt"，因为:nth-child(odd)和:nth-child(even)选择器会为您处理它。

Answer 2

这种行为似乎影响了应用程序的样式，而不是提供任何逻辑，这让我觉得应该放在样式表中，而不是JavaScript中。

在CSS中实现与示例匹配的整行突出显示

table tr {
    background: #a7c942;
}
table tr:hover {
    background: #89ae37;
}
table tr.alt:hover {
    background: #eaf2d3;
}

Answer 3

您可以通过添加和删除css类来很容易地实现这一点，jquery可以做的不仅仅是背景颜色。这是我为你制作的一个改变鼠标悬停背景的例子。

http://jsfiddle.net/zHr4n/8/