css(8) html(19) JavaScript(23) MODx(17) Perl(21) php(20) RegExp(13) SEO(7) гаджеты(1) задачка(9) интернет(35) лытдыбр(10) полезности(35) разное(10) разработка(37) софт(11) тесты(4) юмор(5)

Часто бывает нужно вывести большууую таблицу, а в первой ячейке каждой строки — чекбоксы. Типа меню. Сделать такую таблицу удобней можно и не сложно при помощи JavaScript с любимым jQuery.

Сначала план работ.

Я хочу чтобы подсвечивалась та строка меню, над которой стоит курсор.

А еще хочу чтобы я мог тыцнуть мышкой в любую часть строки, поставив или убрав, при этом чекбокс.

А еще нужно подсвечивать те строки, которые выбраны сейчас.

Поехали

Табличка будет вида:

<table>
    <tr class="th">
        <td>&nbsp;</td>
        <td>Блюдо</td>
        <td>Цена</td>
    </tr>
    <tr class="coloring">
        <td><input type="checkbox"/></td>
        <td>Сосиски</td>
        <td>35 руб.</td>
    </tr>
</table>

Естественно, строк класса coloring будет больше, чем одна. А заголовочные строки мы должны пропускать и не подсвечивать, так как они уже как-то выделены, судя по всему.

Подсветка активной строки

Делается очень просто:

$('.coloring').hover(
    function()    {
        $(this).addClass('colored_row');
    },
    function()    {
        $(this).removeClass('colored_row');
    }
);

Функция hover специально сделана для таких случаев, когда нужно выполнить 2 разных кода для подведения мыши и ухода ее с элемента. Первая функция выполняется при наведении мыши, вторая — при уходе. Мы добавляем и удаляем класс к строке, а в CSS пишем что-то в духе:

.coloring *    {
    cursor: default;
}
.colored_row    {
    background-color: #ddd;
}

И радуемся жизни.

Я установил свойство cursor для всех элементов внутри таблицы в default. Такой курсор выглядит как стрелочка простая. Кому-то это может показаться лишним.

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

Ставим чекбокс

Нужно перехватывать событие click. В jQuery нет ничего проще.

$('.coloring td').click(function()    {
    //if click on checkbox cell
    var $flag = $("input", $(this));
    //if click on cell without checkbox
    if($flag.html() == null)    {
        $flag = $("input", $(this).parent());
    }
    var checked = $flag.attr('checked');
    //if checkbox is not checked
    if(checked == false)    {
        $flag.attr("checked","checked");
    }
    //checkbox is checked
    else    {
        $flag.removeAttr('checked');
    }
});

Сначала мы пытаемся найти элемент чекбокса. Он может быть в той ячейке, по которой тыцнули, а может — в соседней. Если не получается найти его в той же, то мы поднимаемся на уровень вверх и находим его уже там, в элементе tr.

Затем мы проверяем установлен ли флажок. Если да, то снимаем его. Если нет — ставим. Все просто.

Но есть проблема.

Проблема

Если мы тыцнем непосредственно на флажок, то он не изменит своего состояния. Потому что сначала установится нормально, а потом снимется скриптом. Есть разные способы борьбы с этим. Попробуем скриптовый. Для этого, нам понадобится получить объект события. Это очень просто в jQuery.

$('.coloring td').click(function()    {
изменим на
$('.coloring td').click(function(e)    {

 Теперь в переменной e у нас содержится объект события. Нужно получить имя эелемента, на который был произведен клик. И если это input, не делать ничего.

 $('.coloring td').click(function(e)    {
    var elm = e.target||event.srcElement;
    //if click on checkbox
    if(elm.tagName.toLowerCase() == 'input')    {
        return;
    }

 Отлично! Теперь все работает.

Выделение цветом отмеченных строк

Теперь дело за малым. Нужно выделять цветом строки, в которых чекбокс поставлен. Это легко сделать с тем, что у нас получилось. Воспользуемся функцией toggleClass, которая добавляет или удаляет класс из элемента в зависимости от того, есть он там или нет.

В результате нехитрых преобразований, у нас получится такой вот код (зеленым выделил добавленные строки):

$('.coloring td').click(function(e)    {
    var elm = e.target||event.srcElement;
    //if click on checkbox
    if(elm.tagName.toLowerCase() == 'input')    {
        $(this).parent().toggleClass('checked_row');
        return;
    }
    //if click on checkbox cell
    var $flag = $("input", $(this));
    //if click on cell without checkbox
    if($flag.html() == null)    {
        //if this cell has no select
        if($('select',$(this)).html() == null)    {
            $flag = $("input", $(this).parent());
        }
        else    {return}
    }
    var checked = $flag.attr('checked');
    if(checked == false)    {
        $flag.attr("checked","checked");
        $(this).parent().toggleClass('checked_row');
    }
    else    {
        $flag.removeAttr('checked');
        $(this).parent().toggleClass('checked_row');
    }
});

 Теперь наши строки подсвечиваются, если в CSS есть строка вида:

.checked_row    {
    background-color: #EEEE00;
}

 Удачной охоты.