coloring table column on click

I'm using the tablesorter(http://tablesorter.com) jquery plugin to sort table data... Does anyone know if its possible to change the color of the entire colu开发者_如何学JAVAmn on click? Even if it isn't with this plugin, some other way?

Thanks, Mike

---

Looking at the docs you linked to they mention a couple of triggers that fire when sorting starts/stops. Which are connected by binding them to the table.

var table=$('#myTable').tablesorter();
table.bind('sortEnd', updateCells);

Looking at the code they use in their examples I see that the sorted header has a class 'headerSortUp' or 'headerSortDown'. From here we find out which <th> has one of these classes and highlight its column cells.

function updateCells(){
  var sortHead=$('.headerSortUp, .headerSortDown', table).get()[0],
  index=$('th', table).index(sortHead);

  if (index>=0){
    $('td', table).removeClass('selected');
    $('tr', table).each(function(){
     $('td:eq('+index+')', this).addClass('selected');

    });

  }
}

---

This sample will work with most tables, as long as there are no nested tables. And even so if you chose the selectors accordingly you won't have problems. Since you're using already a jQuery plugin I'll assume i can use it as well.

$(function(){
    //you might want to be a bit more specific than only 'td', maybe 'table.classname td' or 'table#id td'
    $('td').click(function(){
        var $this = $(this);
        //find the index of the clicked cell in the row
        var index = $this.prevAll().length;
        //go back to the parent table (here you might also want to use the more specific selector as above)
        //and in each row of that table...
        $this.parents('table').find('tr').each(function(){
            //...highlight the indexth cell
            $(this).find('td:eq('+index+')').css('background-color', 'yellow')
        })
    })
})

instead of css('background-color', 'yellow') you might want to use toggleClass('higlighted')

---

Not familiar with this plugin, but assuming there's a class on each column, you could do something like this on click:

$("#table .column-class").addClass("highlighted");

Notice that you'll be adding a class to each in each whereas when you highlight a row, you can just add a class to a . Then in your CSS make a rule like:

#table .column-class {
    background-color:;
}

You could dynamically figure out the class of the click column and then use that in your selector to make this easier to reuse. Hope that makes sense. I'd also check the documentation real quick to make sure this isn't something that's already supported.

---

May be you can change the CSS dynamically getting the CSS speed instead of the slow DOM.

When you click a column, ie: the 3rd
You add a style with an ID, for 'td:nth-child(3)' with a special background

Then you click the 2nd.
You remove the style with the ID. And you add a style 'td:nth-child(2)' with the background.
And so on.

Here below is an example of source I use in our app to add styles dynamically.

To add a style

var styleNode = document.createElement("style");
styleNode.setAttribute('type', 'text/css');
styleNode.setAttribute('media', 'screen'); 
styleNode.setAttribute('id', 'currentColumnStyle');
document.getElementsByTagName("head")[0].appendChild(styleNode);
if(/MSIE/.test(navigator.userAgent)){
  styleNode.styleSheet.cssText = css;
}else{
  styleNode.appendChild(document.createTextNode(css));
}  

'css' above is a string like: td:nth-child(2){background:#FEB}

To remove it

var cs = document.getElementById('currentColumnStyle');
cs && cs.parentNode.removeChild(cs);