CSS：为表格中选定的行设置颜色

我需要将以下功能添加到我的表中：

当用户单击一行（选择它）时，该行会用颜色标记#FFCF8B（与hover）。我试过#newspaper-b tbody tr.selected td，但它不起作用。

   #newspaper-b {
        border-collapse: collapse;
        border-color: #B7DDF2;
        border-style: solid;
        border-width: 1px;
        font-family: Arial,Helvetica,sans-serif;
        font-size: 11px;
        margin: 0;
        text-align: left;
        width: 480px;
    }
    #newspaper-b th {
        background: none repeat scroll 0 0 #EBF4FB;
        border-color: lightgray;
        font-size: 11px;
        font-weight: bold;
        padding: 15px 10px 10px;
    }
    #newspaper-b tbody tr td {
        background: none repeat scroll 0 0 #FFFFFF;
    }
    #newspaper-b td {
        border-top: 1px dashed #FFFFFF;
        color: #000000;
        padding: 10px;
    }
    #newspaper-b tbody tr:hover td {
        background: none repeat scroll 0 0 #FFCF8B;
        color: #000000;
    }
    #newspaper-b tbody tr.selected td {
        background: none repeat scroll 0 0 #FFCF8B;
        color: #000000;
    }

为了将 .selected 类添加到您单击的行中，您需要一些 JavaScript。

Example http://jsfiddle.net/thebabydino/KzVfy/ http://jsfiddle.net/thebabydino/KzVfy/

我使用 jQuery 作为示例，因此代码很少：

$("tr").click(function(){
    $(this).addClass("selected").siblings().removeClass("selected");
});​

当然，如果您不想包含 jQuery，则可以在不使用任何库的情况下完成。

只是为了变化，我做了另一个版本。这个不使用库（没有 jQuery、没有 Mootools、没有 YUI、没有 Dojo 等等...）并选择多行。可以看到在http://jsfiddle.net/thebabydino/nY5jj/ http://jsfiddle.net/thebabydino/nY5jj/再次单击所选行时会取消选择该行http://jsfiddle.net/thebabydino/nY5jj/1/ http://jsfiddle.net/thebabydino/nY5jj/1/

JavaScript 是：

var trs = document.querySelectorAll("tr");
for(var i = 0; i < trs.length; i++){
    trs[i].addEventListener("click", function(){this.className += " selected";});
}​

要在第二次单击所选行时取消选择该行：

var trs = document.querySelectorAll("tr");
for(var i = 0; i < trs.length; i++){
    trs[i].addEventListener("click", function(){
        var cn = this.className, thc = " selected", start_idx = cn.indexOf(thc);
        if(start_idx == -1) cn += thc;
        else cn = cn.replace(thc,"");
        this.className = cn;
    });
}​