Manoz Manoz - 1 month ago 5
HTML Question

Change image recursively of table header

I am using

jquery.sortElement.js
to sort table. Sorting table with header is working. Now i want to add an image on header click for
ascending
and
descending
order. I added image successfully for ascending order.

Alignment of these images is not working.
I tried it with
display:table-header-group;
But all went too bad.

Problem-


  1. Image is not aligned with table header, I want image to append after header text.

  2. Second image for descending order is also not showing in header.



Code I 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;
}


I want images to replace recursively on
descending
and
ascending
order with proper alignment.

Here is Working fiddle- Fiddle

Answer

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

You had an invalid value for the background-position property, it should be like this:

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