添加排序箭頭到<th>像桌上的分揀機

Question

我想添加雙箭頭（向上和向下）我的表，如tablesorter插件。

這是我的fiddle。出於某種原因，甚至沒有一個箭頭出現在jsfiddle中，但它在我的原始表上工作。

我嘗試這樣做：

$("table th").addClass("headerSortUp"); 
$("table th").addClass("headerSortDown"); 

但沒有奏效。任何想法我怎麼能做到這一點？

Answer 1

問題是與你的.headerSortUp背景。我有以下改變了它：

background: url(http://tablesorter.com/themes/blue/bg.gif) no-repeat 99%; 

jsFiddle with absolute bg

Answer 2

我得到invalid property value在鉻。

加上引號它的工作原理：

background: url("data:image/gif;base64, R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw=") no-repeat 99%; 

我轉換的雙箭頭爲base64了。

JSFiddle

Answer 3

我能得到它的使用，而不是你使用什麼其他背景圖片的工作。這也許可以給你一些洞察問題：

.headerSortUp { 
    background: url(http://placehold.it/25x25) no-repeat 99%; 
} 
.headerSortDown { 
    background: url(http://placehold.it/25x25) no-repeat 99%; 
} 

Fiddle

Answer 4

最好的解決辦法沒有圖像，純CSS。只需在td或th行上放置classnames headerSortDown和headerSortUp，脫字符就會出現。

table td, 
 
table th{ 
 
    border: 1px solid silver; 
 
} 
 
.headerSortDown:after, 
 
.headerSortUp:after{ 
 
    content: ' '; 
 
    position: relative; 
 
    left: 2px; 
 
    border: 8px solid transparent; 
 
} 
 
.headerSortDown:after{ 
 
    top: 10px; 
 
    border-top-color: silver; 
 
} 
 
.headerSortUp:after{ 
 
    bottom: 15px; 
 
    border-bottom-color: silver; 
 
} 
 
.headerSortDown, 
 
.headerSortUp{ 
 
    padding-right: 10px; 
 
}

<table> 
 
    <thead> 
 
    <tr> 
 
     <th class="headerSortDown">ID</th> 
 
     <th class="headerSortUp">Username</th> 
 
     <th>Fullname</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>John</td> 
 
     <td>John Doe</td> 
 
    </tr> 
 
    <tr> 
 
     <td>2</td> 
 
     <td>Jenny</td> 
 
     <td>Jenny Smith</td> 
 
    </tr> 
 
    <tr> 
 
     <td>3</td> 
 
     <td>Tom</td> 
 
     <td>Tom Doe</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

還檢查我的jsfiddle：http://jsfiddle.net/rTXXz/的工作示例。

更新：修復了鍍鉻

Answer 5

這裏是一個下降的箭頭內聯。不幸的是，我不知道如何使數據變小，但生成的圖像尺寸相同。

background: url('data:image/gif;base64,R0lGODlhFQAEAPcAAAAAACMtMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAAVAAQAAAgaAP8JHCgwgMGDAQgqXIgw4cKHAw9CnFhwYkAAOw==') no-repeat 99%;

Answer 6

注：我加入了這個答案，因爲它提供了一種替代的方法來添加箭頭，而不使用圖像但並遵循保持箭頭在後臺的邏輯。

一種方法來添加沒有圖像的箭頭，同時保持圖像的樣式（只需調整它的味道，我沒有優化div或CSS中的邏輯〜更多的概念證明（快速原型））。這種方法的另一個好處是你可以很容易地用箭頭改變箭頭的顏色，如果你將兩個箭頭放在不同的div中，你甚至可以在已經選中的時候隱藏它們（當前它們只是在懸停時單獨改變顏色）。

See the example in action！

HTML

<table class="test-table"> 
    <tr class="headRow"> 
    <th> 
<div class="table-head-container"> 
    <div class="table-head-background"> 
     <div class="right-text"> 
     <div class="small-frame"> 
      <div class="up-arrow">&#9650</div> 
      <div class="down-arrow">&#9660</div> 
     </div> 
     </div> 
    </div> 
    <div class="Col-header">First</div> 
</div> 
    </th> 
    <th> 
<div class="table-head-container"> 
    <div class="table-head-background"> 
     <div class="right-text"> 
     <div class="small-frame"> 
      <div class="up-arrow">&#9650</div> 
      <div class="down-arrow">&#9660</div> 
     </div> 
     </div> 
    </div> 
    <div class="Col-header">Last</div> 
</div> 
    </th> 
    <th> 
<div class="table-head-container"> 
    <div class="table-head-background"> 
     <div class="right-text"> 
     <div class="small-frame"> 
      <div class="up-arrow">&#9650</div> 
      <div class="down-arrow">&#9660</div> 
     </div> 
     </div> 
    </div> 
    <div class="Col-header">Phone</div> 
</div> 
    </th> 
    </tr> 
    <tr> 
    <td>John</td> 
    <td>Doe</td> 
    <td>555-5555</td> 
    </tr> 
    <tr class="evenRow"> 
    <td>Jane</td> 
    <td>Smith</td> 
    <td>555-5555</td> 
    </tr> 
    <tr> 
    <td>Homer</td> 
    <td>Simpson</td> 
    <td>555-5555</td> 
    </tr> 
</table> 

CSS

.table-head-container { 
    position: relative; 
    color: white; 
    max-width: 100px; 
} 

.test-table { 
    border: solid black 1px; 
} 

.headRow { 
    background-color: green; 
    color: white; 
} 

.headRow > th { 
    border: solid black 2px; 
    padding: 10px 20px 10px 5px; 
    min-width:100px; 
    font-size: 1.6em 
} 

.evenRow { 
    background-color: #E8E8E8; 
} 

table { 
    border-collapse: collapse; 
} 

tr > td { 
    border: solid black 1px; 
    padding: 5px; 
} 

.Col-header { 
    text-align: left; 
} 

.table-head-background { 
    position: absolute; 
    top: -10; 
    left: 15; 
    bottom: 0; 
    right: 0; 
    z-index: 1; 
    width: 0; 
    color: white; 
    background-color:green; 
} 

.table-head-background > .right-text { 
    text-align: right; 
} 

.table-head-background > .right-text > .small-frame { 
    position: absolute; 
    left: 80px; 
    width: 5px !important; 
    word-wrap: break-word; 
} 

.table-head-background > .right-text > .small-frame > .up-arrow, .table-head-background > .right-text > .small-frame > .down-arrow { 
font-size: .8em; 
} 

.table-head-background > .right-text > .small-frame > .up-arrow:hover, .table-head-background > .right-text > .small-frame > .down-arrow:hover { 
    color: blue !important; 
}