Добрый день.
Задача: нужно отрендерить строки всех таблиц на странице с помощью javascript. Четные одного цвета, не четные другого.
Вопрос: есть ли какой-нибудь скрипт для данной задачи?
P/S: Желательно jquery.
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществу (function ($) {
$.fn.tableRowStyle = function(options){
var options = $.extend({
classEven: 'tr-even',
//класс для не четных строк, можно задать любой
classOdd: 'tr-odd',
//класс для четных строк, можно задать любой
classHeader: 'thead',
//класс для заголовков, можно задать любой
classHover: 'tr-hover',
//класс для подсветки принаведении, можно задать любой
classSelected: 'selected',
//класс для выбранной строки, можно задать любой
multiSelected: 'true'
//'false' означает возможность выделить только одну строку
//'true' означает возможность выделить любые строки
//'none' отключить возможность выделения строки
},options);
return this.each(function() {
var current = $(this);
current.find('tr:has("td")').hover( //выбираем из всех элементов td, которые имеют внутри td (обычные ячейки)
function (){
$(this).addClass(options.classHover);
},
function () {
$(this).removeClass(options.classHover);
}//навешиваем событие hover, первая функция при наведении курсора, вторая возвращает внешний вид при уходе курсора
).click(function(){
var row = $(this);
if(options.multiSelected=='false'){// проверяем какой параметр задан
if(row.parent().find('tr').hasClass(options.classSelected)){row.removeClass(options.classSelected)}
else{row.addClass(options.classSelected)}
//манипуляции для выделения только одной строки
} else if(options.multiSelected=='true'){
if(row.hasClass(options.classSelected)){row.removeClass(options.classSelected)}
else{row.addClass(options.classSelected)}
//манипуляции для выделения всех строк
} else {return false}
// возвращаем false, если не хотим вообще ничего выделять на клик
});
//Назначаем классы сперва четным строкам, затем не четным, а потом выделяем все заголовки
current.find('tr:even').addClass(options.classEven);
current.find('tr:odd').addClass(options.classOdd);
current.find('tr:has("th")').removeClass(options.classEven).addClass(options.classHeader
});
};
})(jQuery)