0

我正在使用jquery.sortElement.js排序表。带有标题的排序表正在工作。现在我想在标题上添加图像点击ascending并descending订购。我成功地为升序添加了图像。

这些图像的对齐不起作用。我试过了，display:table-header-group;但一切都太糟糕了。

问题-

  1. 图像未与表头对齐，我希望图像附加在标题文本之后。
  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 回答