колонка раскраски по клику

Question

Я использую tableorter (http://tablesorter.com) плагин jquery для сортировки данных таблицы ... Кто-нибудь знает, возможно ли изменить цвет всего столбца при клике? Даже если это не так плагин, как-то иначе?

Спасибо, Mike

Answer 1

Глядя на документы, с которыми вы связаны, они упоминают пару триггеров, которые срабатывают при запуске / остановке сортировки. Которые связаны, связывая их с таблицей.

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

Глядя на код, который они используют в своих примерах, я вижу, что отсортированный заголовок имеет класс headerSortUp или headerSortDown. Отсюда мы узнаем, какой <th> имеет один из этих классов, и выделим его ячейки столбцов.

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');

    });

  }
}

Answer 2

Этот образец будет работать с большинством таблиц, если нет вложенных таблиц. И даже если вы выбрали соответствующие селекторы, у вас не будет проблем. Так как вы уже используете плагин jQuery, я предполагаю, что могу использовать его также.

$(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')
        })
    })
})

вместо css ('background-color', 'yellow') вы можете использовать toggleClass ('higlighted')

Answer 3

Может быть, вы можете изменить CSS динамически, получая скорость CSS вместо медленного DOM.

При нажатии на столбец, т. Е .: 3-й
Вы добавляете стиль с идентификатором для 'td: nth-child (3)' со специальным фоном

Затем вы нажимаете 2-й.
Вы удаляете стиль с идентификатором. И вы добавляете стиль 'td: nth-child (2)' с фоном.
И так далее.

Ниже приведен пример источника, который я использую в нашем приложении для динамического добавления стилей.

Чтобы добавить стиль

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' выше - строка типа: td: nth-child (2) {background: #FEB}

Чтобы удалить его

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

Answer 4

Не знаком с этим плагином, но при условии, что в каждом столбце есть класс, вы можете сделать что-то вроде этого при нажатии:

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

Обратите внимание, что вы будете добавлять класс к каждому в каждом, тогда как, когда вы выделяете строку, вы можете просто добавить класс в a. Тогда в вашем CSS создайте правило вроде:

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

Вы можете динамически определить класс столбца click, а затем использовать его в своем селекторе, чтобы упростить его повторное использование. Надеюсь, что это имеет смысл. Я бы также быстро проверил документацию, чтобы убедиться, что это уже не поддерживается.