Colorare riga e colonna di una tabella all'hover del mouse in jquery

**ldetomi** · 05-03-2010, 14:29

Ho una tabella che vorrei manipolare in jquery per fare in modo che quando il mouse è in "hover" su una cella, venga applicata una classe (o uno specifico stile) a tutte le celle della stessa riga e della stessa colonna.

Al momento ho realizzato questo, che funziona solo sulla riga, ma che agisce appunto sul TR e non su ogni TD (quindi ad esempio, non potrei cambiare il colore del testo).

codice:

   $(document).ready(function()
   {
      $('td').hover(function()
      {
        $(this).parent().css('background-color', 'red');
      }, function()
      {
        $(this).parent().css('background-color', 'transparent');
      });
   });

e in ogni caso sarà necessario agire sui TD visto che vorrei applicare lo stile sia sulla riga che sulla colonna.

**Xinod** · 05-03-2010, 14:45

Originariamente inviato da ldetomi
(quindi ad esempio, non potrei cambiare il colore del testo)

se pianificato opportunamente via css non sarebbe questo il problema

comunque
dopo parent()
http://api.jquery.com/find/

**ldetomi** · 05-03-2010, 14:57

Originariamente inviato da Xinod
se pianificato opportunamente via css non sarebbe questo il problema

Via css, accetta il colore del testo solo direttamente dentro alla cella, non se lo dichiaro a livello di riga della tabella... :-) cmq, ora indago find(), grazie.

**Xinod** · 05-03-2010, 15:22

con quale browser?

**ldetomi** · 05-03-2010, 15:43

Con IE lo stile sulla riga, come ad esempio lo sfondo... non ha un effetto corretto sullo sfondo delle celle, nel senso che non "filtra" lo sfondo delle righe, ma viene ripetuto lo stile applicato alla riga, per tutte le celle. Se è un colore non si vede ovviamente, ma se è un' immagine....

**fcaldera** · 05-03-2010, 16:04

copia e incolla questo esempio (fatto al volo)

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>xhtml 1.0</title>
        
        <style type="text/css">
        td {
            border      : 1px solid #767676;
            width       : 80px;
            height      : 50px;
        }
        
        .trhovered td,
        td.tdhovered {
            background  : #e1e1e5;
            cursor      : pointer;
        }
        
        </style>
        <script type="text/javascript" src="jquery-1.4.2.min.js"> </script>
    </head>

<body>

    <table>
        <tbody>
            <tr>
                <td>&nb sp;</td>
                <td>&nb sp;</td>
                <td>&nb sp;</td>
                <td>&nb sp;</td>
                <td>&nb sp;</td>
                <td>&nb sp;</td>
                <td>&nb sp;</td>
            </tr>
            <tr>
                <td>&nb sp;</td>
                <td>&nb sp;</td>
                <td>&nb sp;</td>
                <td>&nb sp;</td>
                <td>&nb sp;</td>
                <td>&nb sp;</td>
                <td>&nb sp;</td>
            </tr>
            <tr>
                <td>&nb sp;</td>
                <td>&nb sp;</td>
                <td>&nb sp;</td>
                <td>&nb sp;</td>
                <td>&nb sp;</td>
                <td>&nb sp;</td>
                <td>&nb sp;</td>
            </tr>
            <tr>
                <td>&nb sp;</td>
                <td>&nb sp;</td>
                <td>&nb sp;</td>
                <td>&nb sp;</td>
                <td>&nb sp;</td>
                <td>&nb sp;</td>
                <td>&nb sp;</td>
            </tr>
            <tr>
                <td>&nb sp;</td>
                <td>&nb sp;</td>
                <td>&nb sp;</td>
                <td>&nb sp;</td>
                <td>&nb sp;</td>
                <td>&nb sp;</td>
                <td>&nb sp;</td>
            </tr>
            <tr>
                <td>&nb sp;</td>
                <td>&nb sp;</td>
                <td>&nb sp;</td>
                <td>&nb sp;</td>
                <td>&nb sp;</td>
                <td>&nb sp;</td>
                <td>&nb sp;</td>
            </tr>
            <tr>
                <td>&nb sp;</td>
                <td>&nb sp;</td>
                <td>&nb sp;</td>
                <td>&nb sp;</td>
                <td>&nb sp;</td>
                <td>&nb sp;</td>
                <td>&nb sp;</td>
            </tr>
            <tr>
                <td>&nb sp;</td>
                <td>&nb sp;</td>
                <td>&nb sp;</td>
                <td>&nb sp;</td>
                <td>&nb sp;</td>
                <td>&nb sp;</td>
                <td>&nb sp;</td>
            </tr>
        </tbody>
    <table>
    

</body>
</html>



<script type="text/javascript">
// <![CDATA[

    function foobar(el) {
        /* event delegation */
        
        var table = $(el);
        var tbody = $('tbody', table);
        
        table.bind('mouseover', function(event) {
            var el = event.target;
                   
            if (el.nodeName === 'TD') {

                var td = $(el);
                var tr = td.parent();               
                col = tr.children().index(td) + 1;
                
                $(['td:nth-child(', col, ')'].join(''), tbody).addClass('tdhovered');
                $(tr, tbody).addClass('trhovered');
                
            }
        });

        table.bind('mouseout', function() {
            $('td', table).removeClass('tdhovered');
            $('tr', table).removeClass('trhovered');
        });
    };
    
    $(document).ready(function() {
        foobar('table');
    });

// ]]>
</script>

questo utilizza l'event delegation sulla tabella e sfrutta il selettore nth-child per individuare la colonna

Discussione: Colorare riga e colonna di una tabella all'hover del mouse in jquery

Strumenti discussione

Ricerca discussione

Visualizza

Colorare riga e colonna di una tabella all'hover del mouse in jquery

Re: Colorare riga e colonna di una tabella all'hover del mouse in jquery

Re: Re: Colorare riga e colonna di una tabella all'hover del mouse in jquery

Permessi di invio