使表格行高亮显示

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类来非常容易地实现这一点，该类可以做的不仅仅是背景色。这是我为你做的一个例子，它改变了鼠标悬停时的背景。

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