javascript - 悬停时更改表格行的背景颜色

Question

这是我在这里的第一篇文章，如果我的文章有点困惑，我们深表歉意。

我正在完成一项使用 HTML5、CSS 和 Javascript 的作业。每当用户将鼠标悬停在该行上时，我正在尝试使用 javascript 更改表格行背景的颜色。但是，我遇到了两个问题。

这是包含完整代码的 JSFiddle 链接:

http://jsfiddle.net/bguqp/8/

第一个问题似乎与这段代码有关。此代码交替显示行颜色。删除后，每当我将鼠标悬停在一行上时，表格行的背景颜色都会发生变化。但是，如果我在 javascript 文件中包含此代码，行背景颜色不会改变。

var tblrows = document.getElementsByTagName('tr');

for(i=0;i<tblrows.length;i++){
    if(i%2==0) tblrows[i].style.backgroundColor = '#0000FF';
    else tblrows[i].style.backgroundColor = '#C0C0C0';

其次，虽然代码在 JSFiddle 上运行，但运行时它似乎无法在我的网络浏览器中运行，即使上面的代码已从 javascript 文件中删除也是如此。

编辑

这是负责在悬停时更改表格行背景颜色的 Javascript 代码

$(document).ready(function(){
    $("table.stripe_table tr:odd").addClass("alternate");

    $("table.stripe_table tr").mouseover(function(){
        $(this).addClass("tr_onmouseover");
    });
    $("table.stripe_table tr").mouseout(function(){
        $(this).removeClass("tr_onmouseover");
    });
    $("table.stripe_table tr").click(function(){
        $(this).toggleClass("tr_onmouseclick");
    });
});

以及我与上述 javascript 代码一起使用的 CSS 代码

table.stripe_table tr.alternate{
    background-color: #CCC;
}
table.stripe_table tr.tr_onmouseover{
    background-color: #FC0
}
table.stripe_table tr.tr_onmouseclick{
    background-color: #F00;
}

Answer 1

这里的问题是 CSS 特异性。向 TR​​ 添加类将取消样式表中的 CSS。不要直接应用颜色，而是添加一个类(偶数/奇数)。

你甚至不需要类，简单的 css 规则就可以做斑马条纹。

tbody tr:nth-child(odd) {
   background-color: #C0C0C0;
}

你说你需要 JavaScript 来实现悬停，实际上你需要它来支持旧的 IE。现代浏览器无需 JavaScript 即可完成此操作

table.stripe_table tr:hover{
    background-color: #FC0
}

你唯一需要做的就是添加一个点击行的类

table.stripe_table tr.selected{
    background-color: #F00
}

和 JavaScript

$(document).on("click","tbody tr", function () {
   $(this).toggleClass("selected");
});