Очередной веб лог…

Часто возникает желание разграничить табличные данные для удобства восприятия, но обычными средствами часто так неохота это делать… А еще удобно интересующую строку подсвечивать каким-то цветом. Решение:

$ = function(docId) { return document.getElementById(docId); }

function highlight(a, flag) {
    return function() {
        if (flag && flag == 1) {
            a.style.backgroundColor = "#cce9ff"
        } else {
            a.style.backgroundColor = a.defStyle;
        }
    }
}

function colorTbl(tbl_id, doHighlight) {
    var tbl = $(tbl_id);
    if (!tbl) {
        return false;
    }
    var trs = tbl.rows;
    for (var i = 1; i < trs.length; i++) {
        if (trs[i].className != ‘inactive’) {
            if (i % 2 == 1) {
                trs[i].style.backgroundColor = “#EEEEEE”;
            } else {
                trs[i].style.backgroundColor = “#FFFFFF”;
            }

            if (doHighlight) {
                trs[i].onmouseover = highlight(trs[i], 1);
                trs[i].onmouseout = highlight(trs[i], 0);
                trs[i].defStyle = trs[i].style.backgroundColor;
            }
        } else {
            trs[i].style.backgroundColor = “#E9CDFF”;
        }
    }
}

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

Пример использования:

<script type='text/javascript'>
colorTbl(id_of_table, 1); //1 - if use with highlite
</script>

Tags: Javascript, пример, решение

Также рекомендую к прочтению:

• try..catch VS if…else. Что, когда и почему?
• Javascript Trim functions
• JSON: JavaScript Object Notation

This entry was posted on Суббота, Март 17th, 2007 at 16:58 and is filed under common. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.