Работа с таблицей с помощью jQuery новичкам

Манипуляции со строками и ячейками таблицы при помощи jQuery.

Задание №1

Необходимо выбирать из таблицы значения столбца "Категория классификатора", одновременно подсвечивая строку таблицы по которой кликнули.

$(document).ready(function(){
    // переменная-хранилище
    var str = ''; 
    // действуем по клику на строке
    $('td').click(function(){
        // запоминаем класс tr
        var now = $(this).parent().attr('class');
        // значение нужной ячейки
        var need = $(this).parent().children('td:eq(1)').text();
        // логика проверки
        if (now === 'check') {
            // удаляем из выборки ненужную строку tr
            $(this).parent().removeAttr('class');
            // взрываем для перебора строку-хранилище
            var arr = str.split(';');
            // обнуляем хранилище для перезаписи
            str = '';
            // перебираем массив
            // для удаления ненужного значения
            $(arr).each(function(k,v){
                // если значение массива не равно
                // удаляемой строке и его длина нулю
                if(need !== v && v.length > 0) {
                    // то заново добавляем его в хранилище
                    str += v+';';
                }
            });
        } else {
            // добавялем строку в выборку
            // присоединяя класс
            $(this).parent().addClass('check');
            // записываем с хранилище нужную ячейку
            str += need+';';
        }
    });
    // при клике по заголовку
    $('h1').click(function(){
        // показываем что мы сохранили
        alert(str);
    });
});

Задание №2

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

$(document).ready(function(){
    // переменная-хранилище
    var str = '';        
    // действуем по клику на строке
    $('td').click(function(){
        // запоминаем класс tr
        var now = $(this).parent().attr('class');
        // значение нужной ячейки
        var need = $(this).parent().children('td:eq(1)').text();
        // логи проверки
        if (now === 'check') {
            // удаляем из выборки ненужную строку tr
            $(this).parent().removeAttr('class');
        } else {
            // добавялем строку в выборку
            // присоединяя класс
            $(this).parent().addClass('check');
            // записываем с хранилище нужную ячейку
            str += need+';';
        }
    });
    // при клике по заголовку
    $('h1').click(function(){
        // скрываем выбранные строки
        $('tr.check').hide();
    });
});

Задание №3

Необходимо сложить числа из нужных ячеек таблицы. Если мы отказываемся от выбора - происходит вычитание.

$(document).ready(function(){
    // переменная-хранилище
    var str = 0;        
    // действуем по клику на строке
    $('td').click(function(){
        // запоминаем класс tr
        var now = $(this).parent().attr('class');
        // значение нужной ячейки
        var need = Number($(this).text());
        // логи проверки
        if (now === 'check') {
            // удаляем из выборки ненужную строку tr
            $(this).parent().removeAttr('class');
            $(this).removeAttr('class');
            // вычитаем, если отказались
            str -= need;
        } else {
            // добавялем строку в выборку
            // присоединяя класс
            $(this).parent().addClass('check');
            $(this).addClass('check_bold');
            // плюсуем, если нужно
            str += need;
        }
    });
    // при клике по заголовку
    $('h1').click(function(){
        // показываем что мы сохранили
        alert(str);
    });        
});

Задание №4

Необходимо перебрать все ячейки таблицы

вариант 1

var td = $('td');        
$(td).each(function(k,v){
    alert($(this).html());
});

вариант 2

var trs = $('tr');        
for (var i = 1; i < trs.length; i++){
  for (var j = 0; j < trs[i].cells.length; j++) {
    alert($(trs[i]).find('td:eq('+j+')').html());
  }
}

Задание №5

Выделить нужные столбцы таблицы и просуммировать значения в ячейках этих столбцов

$(document).ready(function(){
    // выбираем все строки
    var trs = $('tr');
    // переменная-хранилище для индексов
    var store = '';
    // будущая сумма
    var summ = 0;
    $('td').click(function(){
        // определяем индекс ячейки
        // чтобы выделять все по этому индексу
        var ind = $(this).index();
        var ind_val = ind + ';';
        // получаем класс ячейки
        // чтобы манипулировать включить-выключить
        var check = $(this).attr('class');
        // логика проверки включить-выключить
        if (check === 'check') {
            // удаляем подсветку столбца
            for (var i = 1; i < trs.length; i++){
                $(trs[i]).find('td:eq('+ind+')').removeClass('check');
            } 
            // удаляем подстроку из хранилища
            store = store.replace(new RegExp(ind_val,'g'), '');
        } else {
            // подсвечиваем столбец
            for (var i = 1; i < trs.length; i++){
                $(trs[i]).find('td:eq('+ind+')').addClass('check');
            }            
            // проверка на наличие дублей
            // и добавление в хранилище
            if (store.indexOf(ind_val) === -1) {
                store += ind_val;
            }  
        }
    });
    // при клике по заголовку
    $('h1').click(function(){
        // удаляем последнюю точку с запятой
        store = store.slice(0,-1);
        // преобразуем строку в массив
        var arr = store.split(';');        
        // перебираем массивы индексов и строк
        // если индекс есть - плюсуем
        for (var i = 1; i < trs.length; i++){
            $(arr).each(function(k,v){
                var q = $(trs[i]).find('td:eq('+v+')').text();
                var dig = Number(q);
                summ += dig;
            });
        }
        // проверка на корректность сложения
        // вдруг подсветили не тот столбец
        if (isNaN(summ)) {
            summ = 'эти столбцы нельзя складывать';
        }
        alert(summ);
    });
});

Задание №6

Подсветка строк и столбцов таблицы при перемещении по ней курсора.

$(document).ready(function(){
    // события на ячейке вход-выход
    $("td").on("mouseenter mouseleave", function(){
        // меняем класс на строке
        $(this).parent('tr').toggleClass('check'); 
        // меняем класс на ячейке
        $(this).toggleClass('check_bold');
        // получаем индекс ячейки
        var ind = $(this).index();
        // перебираем строки таблицы
        // все кроме первой - шапки
        $('tr:not(:eq(0))').each(function(){
            // меняем класс для ячейки каждой строки
            // тут важна очередность 'td:eq('+ind+')',this
            $('td:eq('+ind+')',this).toggleClass('check');
        });        
    });    
});

Задание №7

Суммирование чисел из выбранных ячеек таблицы

$(document).ready(function(){
    // переменная хранилище
    var store = '';
    $("td").on("click", function(){
        // сбрасываем хранилище
        store = '';
        // присваиваем класс отмеченным ячейкам
        $(this).toggleClass('check_bold');
        // перебираем выбранные ячейки
        // для записи чисел в хранилище
        $('td.check_bold').each(function(){
            var val = $(this).text();
            var vali = val + ';';
            store += vali;            
        });
        // избавляемся от точки с запятой в конце
        store = store.slice(0,-1);
    });
    // при клике по заголовку
    $('h1').click(function(){
        // переменная для суммирования
        var summ = 0;
        // преобразуем хранилище в массив
        var arr = store.split(';');
        // перебираем массив
        $(arr).each(function(k,v){
            // суммируем выбранняе йчейки
            summ += Number(v);
        });
        // показываем что просуммировали
        alert(summ);
    });    
});

Небольшие итоги по интересным моментам кода

$(this).parent().attr('class');
$(this).parent().removeAttr('class');
$(this).parent().addClass('check');
$(this).removeClass('check');
// очень удобно удалять-присваивать
$(this).toggleClass('check_bold');
$(this).parent('tr').toggleClass('check');
// важная очередность селектора и this
$('td:eq('+ind+')',this).toggleClass('check');
$(this).parent().children('td:eq(1)').text();
$(arr).each(function(k,v){...}
// два события через пробел
$("td").on("mouseenter mouseleave", function(){...}
// два условия отрицания
$('tr:not(.check,:eq(0))').each(function(){...}
if (isNaN(summ)) {...}
// поиск в строке таблицы
$(trs[i]).find('td:eq('+j+')').html()
// замена подстроки в строке
store.replace(new RegExp(ind_val,'g'), '')
// превращение строки в массив
str.split(';');
Number($(this).text());
$(this).index();
trs.length
// количество ячеек в строке таблицы
trs[i].cells.length
// поиск подстроки в строке
store.indexOf(ind_val) === -1
// удаление последнего символа
store.slice(0,-1)