javascript - 使表格行突出显示

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) 选择器会为您处理。