• Demo
• Js

FUNZIONALITA’:

• Aggiunge la classe “hover” ai td di una certa riga di tabella (tr > td) sull’evento hover del tr
• Aggiunge la classe “selected” ai td di una certa riga di tabella (tr > td) sull’evento click del td
• Aggiunge la classe “selected” ai td di una certa riga di tabella al click sui controlli form checkbox e radio (di conseguenza anche al click sulle label) presenti sulla riga stessa
• Nel caso di input:radio la classe selected viene prima cancellata dalle altre righe e poi applicata alla riga “selezionata”

AUTOLOAD

Per attivarlo basta includere gli scripts (jquery, comodoclick) e aggiungere la classe comodoclick ad una tabella.

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="comodoclick.js" type="text/javascript"></script>

<table class="comodoclick">

CSS

Personalizzare a piacere queste classi css:

table.comodoclick tr td.hover {background-color:red;}
table.comodoclick tr td.selected {background-color:green;}

CODE

Il plugin con qualche nota:

/*
 * Copyright (c) 2008 Massimiliano Balestrieri
 *
 * @requires jQuery v1.3.2
 *
 * Copyright (c) 2008 Massimiliano Balestrieri
 * Examples and docs at: http://maxb.net/blog/
 * Licensed GPL licenses:
 * http://www.gnu.org/licenses/gpl.html
 */
;
(function($){

    function ComodoClick(){
        return this.each(function(){
            var that = this;

            jQuery("tr", this).hover(function(){
                jQuery("td", this).addClass("hover");
            }, function(){
                jQuery("td", this).removeClass("hover");
            });

            jQuery("tr", this).click(function(e){
                var _target = e.target || e.srcElement;
                var _tag = _target.tagName.toString().toLowerCase();
                //prendo solo il click sul td
                //se ci fossero tag di tipo blocco dentro il td sarebbe un problema
                //se invece clicco su una input o su una label gestisco tutto con l'evento -> VEDI SOTTO
                if (_tag === 'td') {
                    var _tr = jQuery(this);
                    _highlight_row(_tr, true);
                }
                //return false;
            });

            //vedi sotto A
            jQuery("tr", this).find("input:checkbox, input:radio").bind("click", function(){
                var _tr = jQuery(this).parents("tr");
                _highlight_row(_tr, true);
            });
            //vedi sotto B
            jQuery("tr", this).find("input:checkbox").bind("checked", function(){
                var _tr = jQuery(this).parents("tr");
                _highlight_row(_tr, false);
            });

            var _highlight_row = function(_tr, flag){
                //il flag è per selezionare la checkbox/radio forzatamente
                //checkbox gestisce la "multiselezione"

                var _checkbox = jQuery("input:checkbox", _tr).length > 0;

                //nel caso dei radio cancello le altre colorazioni
                if (!_checkbox) {
                    jQuery("td", that).removeClass("selected");
                    jQuery("tr", that).removeClass("selected");
                    jQuery("td", _tr).addClass("selected");
                    _tr.addClass("selected");

                    if (flag) {
                        jQuery("input:radio", _tr).attr("checked", "checked");
                    }

                }
                else {
                    var _selected = _tr.is(".selected");
                    if (_selected) {
                        jQuery("td", _tr).removeClass("selected");
                        _tr.removeClass("selected");
                        jQuery("input:checkbox", _tr).attr("checked", "");
                    }
                    else {
                        jQuery("td", _tr).addClass("selected");
                        _tr.addClass("selected");
                        jQuery("input:checkbox", _tr).attr("checked", "checked");
                    }
                }

            };

            //A: triggero click per colorare la riga
            jQuery("input:radio:checked", that).trigger("click");
            //B: triggero checked -> se usassi il click la checkbox si deselezionerebbe
            jQuery("input:checkbox:checked", that).trigger("checked");

        });
    }
	$.fn.comodoclick = ComodoClick;

	//AUTOLOAD
	$(document).ready(function(){
		$('table.comodoclick').comodoclick();
	});
})(jQuery);