[jQuery] Подсветка строки и столбца

Плагин для jQuery. Подсвечивает строку и столбец таблицы, которые содержат ячейку, на которую наведен курсор. Умеет «запоминать» цвет ячейки до наведения курсора.

/************************************************************
 *
 * Cells hover highlight jQuery plugin
 * Author: Svet
 * Version: 1.0.0
 * Date: 17.12.2010
 *
 ************************************************************/
jQuery.fn.cells_hover_highlight = function(options) {
	var options = jQuery.extend({
		bg_color_col_row: "green",
		bg_color_cell: "red"
	},options);
	return this.each(function() {
		table = this;
		options.bg_color = jQuery(table).css("background-color");
		options.span_class_name = "cells_hover_highlight_bg_color";
		id = randomString();
		i = 0;
		jQuery(table).find("tr").each(function() {
			jQuery(this).attr("id", id + "_row_" + i);
			j = 0;
			jQuery(this).find("td").each(function() {
				jQuery(this).attr("id", id + "_cell_" + i + "_" + j);
 
				/***/
 
				jQuery(this).mouseover(function() {
					cell_h(this, options, true);
				});
 
				jQuery(this).mouseout(function(){
					cell_h(this, options, false);
				});
 
				/***/
 
				jQuery(document).ready(function(){
					jQuery("head").append("<style type=\"text/css\">span." + options.span_class_name + "{display: none;}</style>");
				});
 
				j++;
			});
			i++;
		});
 
		function cell_h(obj, options, hover) {
			id = jQuery(obj).attr("id");
			//col
			col = id.substring(id.lastIndexOf("_") + 1);
 
			id = id.substring(0, id.lastIndexOf("_"));
			//row
			row = id.substring(id.lastIndexOf("_") + 1);
 
			id = id.substring(0, id.lastIndexOf("_"));
 
			jQuery(obj).parent("tr").find("td").each(function() {
				if (hover) {
					span = jQuery(this).find("span." + options.span_class_name);
					if (span.length == 0) {
						jQuery(this).append("<span class=\"" + options.span_class_name + "\">" + jQuery(this).css("background-color") + "</span>");
					}
					jQuery(this).css("background-color", options.bg_color_col_row);
				}
				else {
					span = jQuery(this).find("span." + options.span_class_name).first();
					jQuery(this).css("background-color", jQuery(span).text());
				}
			});
			/** td -> tr -> table **/
			jQuery(obj).parent().parent().find("td").each(function() {
				cell_id = jQuery(this).attr("id");
				if (cell_id.substring(cell_id.lastIndexOf("_") + 1) == col) {
					if(hover) {
						span = jQuery(this).find("span." + options.span_class_name);
						if (span.length == 0) {
							jQuery(this).append("<span class=\"" + options.span_class_name + "\">" + jQuery(this).css("background-color") + "</span>");
						}
						jQuery(this).css("background-color", options.bg_color_col_row);
					}
					else {
						span = jQuery(this).find("span." + options.span_class_name).first().text();
						jQuery(this).css("background-color", span);
					}
				}
			});
			if(hover) {
				jQuery("td#" + id + "_" + row + "_" + col).css("background-color", options.bg_color_cell);
			}
			else {
				span = jQuery(this).find("span." + options.span_class_name).first();
				jQuery("td#" + id + "_" + row + "_" + col).css("background-color", jQuery(span).text());
			}
		}
 
	});
 
	function randomString() {
		return '' + new Date().getTime();
	}
};

Небольшая демка.

, , ,

Оставить комментарий

Top ↑ | Main page | Back