Javascript 使表格行可选

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

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

---

这种行为似乎是在设计应用程序的样式，而不是提供任何逻辑，我强烈要求将其放在样式表中，而不是JavaScript中

要实现与示例匹配的整行表格高亮显示，请在CSS中：

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

---

如果在样式表中添加以下内容，则完全可以不使用JS实现悬停效果：

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

演示：

---

请注意，您甚至不需要在备用行上指定

class=“alt”

，因为

：n个孩子（奇数）

和

：n个孩子（偶数）

选择器会为您处理它。

您可以通过添加和删除一个css类来非常轻松地执行此操作，css类的作用远不止于背景色。下面是我为您制作的一个示例，它可以在鼠标悬停时更改背景

---

第一行

else

-应该是：

else{if（this.className=='alt'）

..}

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