colorare riga e colonna tabella al passaggio del mouse

[badaze]

La soluzione di badaze no mi da il risultato che cercavo io, in questo modo si evidenzia tutta l'area compresa tra riga e colonna delimitate dal mouse.
Io vorrei che si evidenziassero solo la riga e la colonna fino al mouse e non oltre.
Non so se mi sono spiegata.

basta rimpiazzare <= da =

[ikapata]

basta rimpiazzare <= da =

Sostituire a (xrow <= row) , (xrow = row), lo stesso per (xcol <= col) . Questo intendi?

[badaze]

Sostituire a (xrow <= row) , (xrow = row), lo stesso per (xcol <= col) . Questo intendi?

Yes.

[badaze]

Yes.

Ho scritto na kakata.

[ikapata]

Ho scritto na kakata.

Infatti!

[badaze]

Ecco il codice corretto.

<script type="text/javascript">
 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;
    row = tr.index()+1;
    
    $('table tr').each(function() {
      $thisTR  = $(this)
      var xrow = $thisTR.index() + 1;
     if (xrow <= row) {
      $($thisTR).find('td').each(function() {
        $thisTD  = $(this);
        var xcol = $thisTD.index() + 1;
       if ((xcol <= col && xrow == row) || (xcol == col && xrow != row)) {
         $thisTD.addClass('tdhovered');
       }  
      });
     }
       });
     }
   });
  
   table.bind('mouseout', function() {
     $('td', table).removeClass('tdhovered');
     $('tr', table).removeClass('trhovered');
   });
 };

 $(document).ready(function() {
   foobar('table');
 });
 </script> 

[ikapata]

Ecco il codice corretto.

<script type="text/javascript">
 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;
    row = tr.index()+1;
    
    $('table tr').each(function() {
      $thisTR  = $(this)
      var xrow = $thisTR.index() + 1;
     if (xrow <= row) {
      $($thisTR).find('td').each(function() {
        $thisTD  = $(this);
        var xcol = $thisTD.index() + 1;
       if ((xcol <= col && xrow == row) || (xcol == col && xrow != row)) {
         $thisTD.addClass('tdhovered');
       }  
      });
     }
       });
     }
   });
  
   table.bind('mouseout', function() {
     $('td', table).removeClass('tdhovered');
     $('tr', table).removeClass('trhovered');
   });
 };

 $(document).ready(function() {
   foobar('table');
 });
 </script> 

Perfetto! E se anche in questo codice vorrei che le prime due celle delle prime due righe non fossero interessate da questo evento, come dovrei modificarlo? Mi spiego......... se il mouse passa su quelle quattro celle non succede nulla.