0

誰かがクリックしたときにテーブルの行を強調表示しようとしています。これが私のテーブルです：

<table class="pretty">
    <tr>
        <td onclick="DoNav('<?php echo $url; ?>');">Name</td>
        <td onclick="DoNav('<?php echo $url; ?>');">Time</td>
        <td onclick="DoNav('<?php echo $url; ?>');">Size</td>
        <td onclick="DoNav('<?php echo $url; ?>');">Length<td>
        <td><input type="checkbox" value="<?php echo $this->result_videos[$i]["video_name"]; ?>" title="Mark this video for deletion" /></td>
    </tr>
...

私はこの投稿に基づいていくつかのことを試しました：

jQuery("table tr").click(function(){
       var row = jQuery(this);
       var hasClass = row.hasClass("highlight");
       jQuery("table tr").removeClass("highlight");
       if(!hasClass){
         row.addClass("highlight");
         alert("Do I get here?");
       }
});

私のcss。編集：問題になる可能性のある完全なCSSを追加しました：

table.pretty {
width: 100%;
border-collapse: collapse;
font-family: "Lucida Sans Unicode","Lucida Grande",Sans-Serif;
clear: both;
}

/* Header cells */
table.pretty thead th {
background: none repeat scroll 0 0 #808184;
border-bottom: 1px solid #2B3D61;
border-top: 4px solid #2B3D61;
color: #ffffff;
font-size: 14px;
font-weight: normal;
padding: 8px;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
text-align: center;
}

/* Body cells */
table.pretty tbody th {
background: none repeat scroll 0 0 #808184;
border-bottom: 1px solid #2B3D61;
border-top: 4px solid #2B3D61;
color: #ffffff;
font-size: 14px;
font-weight: normal;
padding: 8px;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

table.pretty tbody td {
background: none repeat scroll 0 0 #eeeeee;
border-bottom: 1px solid #2B3D61;
border-top: 1px solid transparent;
color: #333333;
padding: 8px;
text-align: center;
}

table.pretty tbody tr {
cursor: pointer;
}

/* Footer cells */  
table.pretty tfoot th {
background: none repeat scroll 0 0 #808184;
border-bottom: 1px solid #2B3D61;
border-top: 4px solid #2B3D61;
color: #ffffff;
font-size: 14px;
font-weight: normal;
padding: 8px;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
text-align: left;
}

table.pretty tfoot td {
background: none repeat scroll 0 0 #808184;
border-bottom: 1px solid #2B3D61;
border-top: 4px solid #2B3D61;
color: #ffffff;
font-size: 14px;
font-weight: normal;
padding: 8px;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
text-align: center;
}


.highlight{
background-color: #a8cb17;
}

どういうわけか、行の色は変わりません。行をクリックするとビデオを開始するDoNav関数にjqueryコード（クリックを差し引いたもの）を入れてみました。

私は何を間違っているのですか。前もって感謝します。

4

2 に答える 2

3

あなたが持っているものはうまくいくはずですが、不必要に複雑です。これは同じコードですが、はるかに短いものです。

var $rows = jQuery("table tr");
$rows.click(function() {
    $rows.removeClass('highlight');
    jQuery(this).addClass('highlight');
});

これがフィドルです：http：//jsfiddle.net/gkxNa/

于 2013-01-18T18:43:14.567 に答える
1

CSSについて

table.pretty tbody td {
   background: none repeat scroll 0 0 #eeeeee;
   ...
}

すべてのテーブルセルを明るい灰色に設定します。

.highlight{
   background-color: #a8cb17;
}

ハイライトされたものの背景を薄緑色に設定します。

行を強調表示していますが、線自体が緑色であっても、緑色の行内の各セルは灰色のままです。

これを修正するには、代わりにセルの色を上書きします。特異性の問題にも注意してください：

table.pretty tbody .highlight,
table.pretty tbody .highlight > td{
   background-color: #a8cb17;
}

（1つのクラス、1つのタグ）は（1つのクラス、3つの要素）よりも具体性が低い.highlight>tdため、十分ではないことに注意してください。.highlight>tdtable.pretty tbody td

于 2013-01-18T20:02:19.310 に答える