Работаем с таблицами

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

Количество

Начнём с получения количества строк и столбцов
//Количество строк
var CountTr = $('#ThisTableId tr').size();
//Количество столбцов
var CountTD = $('#ThisTableId td').size();

Добавляем


Добавить новую строку в таблицу очень легко, добавим строку в конец:
//Добавить строку
$('#ThisTableId > tbody').append('Hello');
Стоит заметить, что данный код будет работать корректно с таблицами, в которых есть tbody. Так что не поленитесь его вставить ;)

Удаляем


Для удаления рассмотрим следующий пример: У нас есть таблица, состоящая из нескольких строк. Строки естественно разбиты на ячейки, и в каждой строке, в последней ячейке у нас будет изображение с крестиком.
Теперь сделаем так, что бы щёлкнув на это изображение, удалялась вся строка таблицы, добавив в событие onclick изображения следующую строку:
//Удалить строку
$($(this).parents().get(1)).remove()
В данном коде мы сначала выбираем строку, в которой находится наше изображение
$(this).parents().get(1)
get(1) , означает что мы обращаемся к родителю родителя (т.е. второму родителю, ведь счёт ведётся с нуля, для обращения к прямому родителю нужно указать 0, или вообще не использовать get()).
Чуточку подробнее: Наше изображение находится в ячейке, значит ячейка это родитель изображения, но нам нужна вся строка, которая является родителем ячейки в которой находится наше изображение. Значит строка по отношению к изображению - родитель родителя, что в коде выглядит как get(1).
$($(this).parents().get(1)).remove()
А далее с помощью remove() удаляем то, что мы выбрали.

Перебор строк


Возможно для перебора всех ячеек есть более оптимальный способ, но вкратце опишу свой, придуманный за несколько минут:
//Количество столбцов
var n = $('#ThisTableId td').size();
//Объявляем переменные
var task = [], action, i = 0, j = n;
//Перебор всех ячеек
$('#ThisTableId tr').find('td').each(function() {
//Если новая строка, то переходим на новый элемент массива и очищаем его
if (j++ % n == 0)
    task[++i] = '';
//Добавляем содержимое в конец
task[i] += $(this).text() + ' ';
});
Данный код перебирает все ячейки таблицы и заносит данные в массив task, в котором каждый элемент содержит в себе все значения ячеек строки разделённые пробелом.