0

テーブルの並べ替えに使用jquery.sortElement.jsしています。ヘッダー付きのソートテーブルが機能しています。今、ヘッダーをクリックしascendingてdescending注文するときに画像を追加したいと思います。昇順で画像を追加しました。

これらの画像の位置合わせが機能していません。で試してみましたがdisplay:table-header-group;、すべてがうまくいきませんでした。

問題-

  1. 画像がテーブル ヘッダーと位置合わせされていません。ヘッダー テキストの後に画像を追加したいです。
  2. 降順の 2 番目の画像もヘッダーに表示されません。

私が試したコード -

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 スタイル -

.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

これがワーキングフィドルです-フィドル

4

1 に答える 1

1

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-02T12:02:52.150 に答える