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

Question

我需要在表格中添加以下功能:

当用户单击某一行(选择它)时,该行将用颜色标记#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;
    }

Answer 1

要为您单击的行添加.selected类,您需要一些JavaScript.

示例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/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;
    });
}?

Answer 2

随着CSS我认为你不能做到这一点。您可以使用jQuery. 我写了快速的基本示例（但有更多方法可以做到）：

 <table class="tab" cellpading="0" cellspacing="0" border="1">
    <tr>
      <td>lol</td>
      <td>lol</td>
    </tr>
    <tr>
      <td>lol</td>
      <td>lol</td>
    </tr>
    <tr>
      <td>lol</td>
      <td>lol</td>
    </tr>
   </table>

添加到您的CSS文件：

tr.clicked {
      background-color: #abc;
}

添加此jQuery代码：

$('.tab tr').click(function() {
      $(this).toggleClass("clicked");
    });

当您单击 中的行时table，jQuery将为background-color您的行添加，再次单击，类将被删除。希望能帮助到你。