6

JQuery tablesoter プラグインを使用しようとしていますが、矢印を表示する場合、降順または昇順で並べ替えたときに下矢印または上矢印が表示されません。常に上下の矢印 (ソートされていない矢印) が表示されます。table.tablesorter .header {...} は table.tablesorter .headerSortUp {...} および table.tablesorter .headerSortDown{...} スタイルをオーバーライドしているようです。以下は私のコードです：

CSS

table.tablesorter .headerSortUp {
    background-image: url('../images/icons/asc.gif');
    background-repeat: no-repeat;
    background-position: center right;
}
table.tablesorter .headerSortDown {
    background-image: url('../images/icons/desc.gif');
    background-repeat: no-repeat;
    background-position: center right;
}
table.tablesorter .header {
    cursor: pointer;
    background-image: url('../images/icons/bg.gif');
    background-repeat: no-repeat;
    background-position: center right;
}

私のテーブルは速度テンプレートにありますが、それがこの問題に影響を与えるとは思いません。

<table id="harvestTable" class="tablesorter" border="1">
      <thead>
      <tr>
        <th>Source</th>
        <th>Time</th>
      </tr>
      </thead>
      <tbody>
      #foreach($item in $self.harvestlist)
        #set($harvestId = $item.getFirst('harvestId'))
...

また、関連するアイコンをそれぞれのフォルダーに含めました。私はクロムを使用しており、これをFirefoxでもテストしましたが、両方では機能しません。クロムで要素を調べると、.header の画像が .headerSortUp および .headerSortDown の画像を上書きしていることがわかります。.header の画像を選択解除すると、.headerSortUp 画像が正しく表示されます。

ここで何かを見逃しましたか？貴重なご回答、誠に有難う御座いました。

ありがとう

4

2 に答える 2

2

これは、CSS の優先ルールによるものです。最後に一致したルールが常に適用されます。この状況を克服するために、あなたの場合のように、いつでも !important 修飾子を使用できます

table.tablesorter .headerSortDown {
 background-image: url('../images/icons/desc.gif') !important;

また

.headerSortDown と .headerSortUp の前に .header css を置くだけで、機能し始めます。

于 2013-04-02T10:18:59.453 に答える