遞歸更改表頭的圖像

我正在使用jquery.sortElement.js對錶進行排序。排序表與標題正在工作。現在我想添加一個圖像在標題點擊ascending和descending命令。我按升序成功添加了圖片。遞歸更改表頭的圖像

對齊這些圖像不起作用。我用display:table-header-group;嘗試過，但都太糟糕了。

Problem-

畫面沒有表頭對齊，我想圖片標題文本後追加。
降序的第二張圖片也未顯示在標題中。

代碼我tried-

var user_table = $('#users'); 
    $('#company_header, #user_header, #email_header, #type_header') 
     .wrapInner('<span title="sort this column"/>') 
     .each(function(){ 

      var th = $(this), 
       thIndex = th.index(), 
       inverse = false; 

      th.click(function(){ 
        $('th').removeClass("image-append-up"); 
      $(this).addClass("image-append-up"); 

       user_table.find('td').filter(function(){ 

        return $(this).index() === thIndex; 

       }).sortElements(function(a, b){ 

        return $.text([a]) > $.text([b]) ? 
         inverse ? -1 : 1 
         : inverse ? 1 : -1; 

       }, function(){ 

        // parentNode is the element we want to move 
        return this.parentNode; 

       }); 

       inverse = !inverse; 

      }); 

     });

CSS styles-

.image-down 
{ 
    height:14px; 
    width:14px; 

    background:url("http://datahub.io/images/chevron-down.png") no-repeat; 

} 
.image-append-up 
{ 
    height:14px; 
    width:14px; 

    background:url("http://datahub.io/images/chevron-up.png") no-repeat; 
background-position:10px 10px 10px 10px; 
}

我希望圖像以合適的對準取代遞歸上descending和ascending秩序。

這裏的工作fiddle- Fiddle

來源

2013-04-02 Manoj

這個排序函數，然後'反=！反向「，mmmm，不知道，它只是看起來不正確。必須有另一種方式來更清楚地做到這一點。 – elclanrs

@elclanrs，請你幫我解決，如果你知道任何其他方式 – Manoj

http://jsfiddle.net/daqGC/9/

您曾經爲background-position屬性的值無效，就應該是這樣的：

.image-append-up 
{ 
    height:14px; 
    width:14px; 
    background:url("http://datahub.io/images/chevron-up.png") no-repeat; 
    background-position:right 2px; 
}

來源

2013-04-02 12:02:52 pckill

非常感謝@pckill，你救了我 – Manoj

遞歸更改表頭的圖像

回答

相關問題