Question

这是我在这里的第一篇文章，很抱歉，如果我的帖子有点混乱。

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

这是包含整个代码的JSFiddle的链接：

第一个问题似乎是这段代码。此代码交替显示行颜色。删除后，每当我将鼠标悬停在一行上时，表格行的背景颜色都会发生变化。但是，如果我在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，但它在运行时似乎无法在我的Web浏览器中运行，即使上面的代码已从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");
    });
});

和CSS代码我正在使用上面的javascript代码

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");
});

在悬停时改变表行的背景颜色

1 个答案: