6

テーブルに次の機能を追加する必要があります。

ユーザーが行をクリック (選択) すると、行は色でマークされます#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;
    }
4

4 に答える 4

30

クリックした行に .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";});
}​

2 回目にクリックしたときに選択した行を選択解除するには:

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;
    });
}​
于 2012-05-26T11:49:20.957 に答える
5

私はあなたがこれ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され、もう一度クリックすると、クラスが削除されます。それが役に立てば幸い。

于 2012-05-26T11:48:32.630 に答える
2

これは道場を使ったフィドルです。他の誰もが言及したのと同じ概念。

http://jsfiddle.net/cswing/SG9dp/

注: 複数の行を選択できるようにしました。質問は要件を述べていませんでした。

于 2012-05-26T11:53:14.063 に答える