Лень - двигатель прогресса :)

Aug 27, 2009 13:17

Задача
Из обьемной готовой таблицы вида:



сделать таблицу вида:



Перегребать и ставить классы на ячейки и строки - неэффективно
Пишем нужные стили:
/* program table */
table.program, .program td, .program th {
    border: none;
    color: #969696;
    padding: 10px 5px;
    text-align: center;
}
    .program th {
        background: #1c1b13;
        padding: 10px !important;
    }
    .hilight th {
        background: #282820;
    }
    .program td {
        background: #141414;
    }       
    td.light {
        background: #0a0a0a
    }
    .hilight td {
        background: #212121;
    }
    .hilight td.light {
        background: #171717;
    }
    .th2 th {
        background: #464646;
    }
    .th2 th.light {
        background: #3e3e3e;
    }
    .th2 th.first {
        background: #4c4b45;
        color: #fff !important;
    }
/* program table */

и маленький скриптик под JQuery:
$(function () {
    if($('table.program').length) {
        $('table.program').find('tr:even').addClass('hilight');
        $('table.program tr.th2').find('th:even').addClass('light');
        $('table.program tr.th2').find('th:first').addClass('first');
        $('table.program').find('td:odd').addClass('light');
    }
});

И таблица раскрашивается, стоит лишь на нее навесить класс

:)

javascript, таблицы, кодинг, jquery

Previous post Next post
Up