Question

我正在使用jquery.sortElement.js对表格进行排序。带标题的排序表正在运行。现在，我想在标题点击上为ascending和descending订单添加图片。我成功添加了图片以升序。

这些图像的对齐无效。我用display:table-header-group;尝试了但是一切都太糟糕了。

问题 -

图片未与表格标题对齐，我希望图片在标题文字后追加。
降序的第二张图片也没有显示在标题中。

我试过的代码 -

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顺序上以正确的对齐方式递归替换图像。

这是工作小提琴 - Fiddle

Answer 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;
}

以表头的递归方式更改图像

1 个答案: