colorare riga e colonna tabella al passaggio del mouse

**ikapata** · 24-11-2014, 16:48

Salve a tutti.

Ho questo codice che evidenzia la riga e la colonna della tabella al passaggio del mouse
<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>

Come faccio a modificarlo per fare in modo che vengano evidenziate le celle della riga e della colonna fino al mouse e non oltre, mi spiego.... che si formi un angolo retto riga-colonna dal punto in cui è posizionato il mouse.

**afilini** · 24-11-2014, 20:57

Questo codice sembra funzionare: http://jsbin.com/lituhamivi/1/edit
Non è commentato, quello che in pratica fa è cercare l'indice della riga e poi della colonna e va ad aggiungere la classe ad entrambe (e ovviamente la toglie quando viene tolto il mouse)

EDIT: come non detto, non avevo capito bene la richiesta.. ora ci lavoro sopra, ti faccio sapere

**badaze** · 24-11-2014, 23:14

Prova questo. Ovviamente il link al file jquery è da modificare.
Dire che 3 ore fa non sapevo nemmeno che fosse possibile.

codice HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
.tdhovered  {background-color:red}
.trhovered  {background-color:red}
-->
</style>
<script language="JavaScript" type="text/javascript" src="js\jquery-1.11.1.min.js">
</script>
<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) {
         $thisTD.addClass('tdhovered');
       }  
      });
     }
       });
     }
   });
  
   table.bind('mouseout', function() {
     $('td', table).removeClass('tdhovered');
     $('tr', table).removeClass('trhovered');
   });
 };

 $(document).ready(function() {
   foobar('table');
 });
 </script>
</head>
<body>
<table summary="">
<tr>
  <td>123</td>
 <td>123</td>
  <td>123</td>
 <td>123</td>
  <td>123</td>
 <td>123</td>
  <td>123</td>
 <td>123</td> 
</tr>
<tr>
  <td>124</td>
 <td>124</td>
  <td>124</td>
 <td>124</td>
  <td>124</td>
 <td>124</td>
  <td>124</td>
 <td>124</td> 
</tr>
<tr>
  <td>125</td>
 <td>125</td>
  <td>125</td>
 <td>125</td>
  <td>125</td>
 <td>125</td>
  <td>125</td>
 <td>125</td> 
</tr>
<tr>
  <td>123</td>
 <td>123</td>
  <td>123</td>
 <td>123</td>
  <td>123</td>
 <td>123</td>
  <td>123</td>
 <td>123</td> 
</tr>
<tr>
  <td>124</td>
 <td>124</td>
  <td>124</td>
 <td>124</td>
  <td>124</td>
 <td>124</td>
  <td>124</td>
 <td>124</td> 
</tr>
<tr>
  <td>125</td>
 <td>125</td>
  <td>125</td>
 <td>125</td>
  <td>125</td>
 <td>125</td>
  <td>125</td>
 <td>125</td> 
</tr>
</table>
</body>
</html>

**Tonenge** · 25-11-2014, 20:05

Ciao a tutti,
di seguito vi propongo una soluzione senza jquery.
Come vedrete ho inserito diversi tipi di over (croce, angolo, riga, colonna),
in verità avevo letto male la richiesta di "ikapata" ed avevo fatto solo quello a croce,

quando me ne sono accorto, già che c'ero, ho fatto gli altri tipi.
Ho fatto lo script velocemente, ma in sostanza bisogna solo chiamare la funzione:
"crossTab.Set()" col primo parametro che è il nome id della tabella ed il secondo la modalità da 0 a 3 dell'over.

Saluti

codice:

<!DOCTYPE>
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>over tabella</title>
<style>
  
.cl_clr, .cl_clc { background-color:#DDD; font-weight:bold; cursor:pointer; }  
  
  
</style>
<script>

 
crossTab={

Set:function(name,mode){   // name=id tabella     mode:  0=CROCE  1=ANGOLO  2=RIGA   3=COLONNA
 mode=+mode;                         
 var r,c,o,j=document.getElementById(name);
  for(r=0;r<j.rows.length;r++) 
   for(c=0;c<j.rows[0].cells.length;c++){
    o=j.rows[r].cells[c];
    o.className+=" "+name+"clr"+r+"clr "+name+"clc"+c+"clc"; 
    o.onmouseover=function(){crossTab.f_ovr(0,this,name,mode)}
    o.onmouseout=function(){crossTab.f_ovr(1,this,name,mode)}
}},

f_ovr:function(m,o,name,mode){
 var c,cl=o.className,
  a=cl.split("clr"), r=+a[1], rr=r; 
  a=cl.split("clc"), c=+a[1], cc=c; 
  if(mode!=1) cc=-1, rr=-1;  
  if(mode!=3) crossTab.f_mark("clr",r,cc,m,name);
  if(mode!=2) crossTab.f_mark("clc",c,rr,m,name);
},

f_mark:function(c,i,t,m,nm){
 var k, j=document.getElementsByClassName(nm+c+i+c), n=j.length;
  t=t<0?n:t+1; 
  for(k=0;k<t;k++) 
   if(m) j[k].className=j[k].className.replace("cl_"+c,""); 
   else j[k].className+=" cl_"+c;
}}
  
  
 
 
window.onload=function(){  

  // creo 4 tabelle di test  
  var n,rr,rc,y=0,s="",r=6,c=8,tx=["CROCE mode=0","ANGOLO mode=1","RIGA mode=2","COLONNA mode=3", ]; 
  for(n=0;n<tx.length;n++){ if(n==2) y=380;
   s+="<div style='position:absolute;left:"+(10+(n&1)*380)+"px;top:"+y+"px;font:bold 16px Arial;'>&nbsp;"+tx[n]+"<br><br><div style='border:1px solid #888;'>"+  
   "<table id='id_table"+n+"' cellpadding='12px' >";
    for(rr=0;rr<r;rr++) {
      s+="<tr>";
      for(rc=0;rc<c;rc++) s+="<td>"+(rr+""+rc)+"</td>";
      s+="</tr>";
    }
    s+="</table></div></div>";
  }
  document.getElementById("id_test").innerHTML=s;


  crossTab.Set('id_table0',0);    
  crossTab.Set('id_table1',1);    // attiva angolo tabella 2
  crossTab.Set('id_table2',2);    
  crossTab.Set('id_table3',3);    
}
 
 
</script>  
  </head>
  <body>

<h2>&nbsp;Colorare riga e colonna tabella</h2>
<div id='id_test' style="position:absolute;left:10px;top:64px;width:800px;height:600px;"></div>

  </body>
</html>

**ikapata** · 26-11-2014, 12:21

Grazie per il post.
Ma il risultato non è quello 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.

**ikapata** · 26-11-2014, 12:22

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.

**ikapata** · 26-11-2014, 12:26

Originariamente inviata da Tonenge

Ciao a tutti,
di seguito vi propongo una soluzione senza jquery.
Come vedrete ho inserito diversi tipi di over (croce, angolo, riga, colonna),
in verità avevo letto male la richiesta di "ikapata" ed avevo fatto solo quello a croce,

quando me ne sono accorto, già che c'ero, ho fatto gli altri tipi.
Ho fatto lo script velocemente, ma in sostanza bisogna solo chiamare la funzione:
"crossTab.Set()" col primo parametro che è il nome id della tabella ed il secondo la modalità da 0 a 3 dell'over.

Saluti

codice:

<!DOCTYPE>
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>over tabella</title>
<style>
  
.cl_clr, .cl_clc { background-color:#DDD; font-weight:bold; cursor:pointer; }  
  
  
</style>
<script>

 
crossTab={

Set:function(name,mode){   // name=id tabella     mode:  0=CROCE  1=ANGOLO  2=RIGA   3=COLONNA
 mode=+mode;                         
 var r,c,o,j=document.getElementById(name);
  for(r=0;r<j.rows.length;r++) 
   for(c=0;c<j.rows[0].cells.length;c++){
    o=j.rows[r].cells[c];
    o.className+=" "+name+"clr"+r+"clr "+name+"clc"+c+"clc"; 
    o.onmouseover=function(){crossTab.f_ovr(0,this,name,mode)}
    o.onmouseout=function(){crossTab.f_ovr(1,this,name,mode)}
}},

f_ovr:function(m,o,name,mode){
 var c,cl=o.className,
  a=cl.split("clr"), r=+a[1], rr=r; 
  a=cl.split("clc"), c=+a[1], cc=c; 
  if(mode!=1) cc=-1, rr=-1;  
  if(mode!=3) crossTab.f_mark("clr",r,cc,m,name);
  if(mode!=2) crossTab.f_mark("clc",c,rr,m,name);
},

f_mark:function(c,i,t,m,nm){
 var k, j=document.getElementsByClassName(nm+c+i+c), n=j.length;
  t=t<0?n:t+1; 
  for(k=0;k<t;k++) 
   if(m) j[k].className=j[k].className.replace("cl_"+c,""); 
   else j[k].className+=" cl_"+c;
}}
  
  
 
 
window.onload=function(){  

  // creo 4 tabelle di test  
  var n,rr,rc,y=0,s="",r=6,c=8,tx=["CROCE mode=0","ANGOLO mode=1","RIGA mode=2","COLONNA mode=3", ]; 
  for(n=0;n<tx.length;n++){ if(n==2) y=380;
   s+="<div style='position:absolute;left:"+(10+(n&1)*380)+"px;top:"+y+"px;font:bold 16px Arial;'>&nbsp;"+tx[n]+"<br><br><div style='border:1px solid #888;'>"+  
   "<table id='id_table"+n+"' cellpadding='12px' >";
    for(rr=0;rr<r;rr++) {
      s+="<tr>";
      for(rc=0;rc<c;rc++) s+="<td>"+(rr+""+rc)+"</td>";
      s+="</tr>";
    }
    s+="</table></div></div>";
  }
  document.getElementById("id_test").innerHTML=s;


  crossTab.Set('id_table0',0);    
  crossTab.Set('id_table1',1);    // attiva angolo tabella 2
  crossTab.Set('id_table2',2);    
  crossTab.Set('id_table3',3);    
}
 
 
</script>  
  </head>
  <body>

<h2>&nbsp;Colorare riga e colonna tabella</h2>
<div id='id_test' style="position:absolute;left:10px;top:64px;width:800px;height:600px;"></div>

  </body>
</html>

PERFETTO! Grazie!

**ikapata** · 26-11-2014, 12:35

Originariamente inviata da Tonenge

Ciao a tutti,
di seguito vi propongo una soluzione senza jquery.
Come vedrete ho inserito diversi tipi di over (croce, angolo, riga, colonna),
in verità avevo letto male la richiesta di "ikapata" ed avevo fatto solo quello a croce,

quando me ne sono accorto, già che c'ero, ho fatto gli altri tipi.
Ho fatto lo script velocemente, ma in sostanza bisogna solo chiamare la funzione:
"crossTab.Set()" col primo parametro che è il nome id della tabella ed il secondo la modalità da 0 a 3 dell'over.

Saluti

codice:

<!DOCTYPE>
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>over tabella</title>
<style>
  
.cl_clr, .cl_clc { background-color:#DDD; font-weight:bold; cursor:pointer; }  
  
  
</style>
<script>

 
crossTab={

Set:function(name,mode){   // name=id tabella     mode:  0=CROCE  1=ANGOLO  2=RIGA   3=COLONNA
 mode=+mode;                         
 var r,c,o,j=document.getElementById(name);
  for(r=0;r<j.rows.length;r++) 
   for(c=0;c<j.rows[0].cells.length;c++){
    o=j.rows[r].cells[c];
    o.className+=" "+name+"clr"+r+"clr "+name+"clc"+c+"clc"; 
    o.onmouseover=function(){crossTab.f_ovr(0,this,name,mode)}
    o.onmouseout=function(){crossTab.f_ovr(1,this,name,mode)}
}},

f_ovr:function(m,o,name,mode){
 var c,cl=o.className,
  a=cl.split("clr"), r=+a[1], rr=r; 
  a=cl.split("clc"), c=+a[1], cc=c; 
  if(mode!=1) cc=-1, rr=-1;  
  if(mode!=3) crossTab.f_mark("clr",r,cc,m,name);
  if(mode!=2) crossTab.f_mark("clc",c,rr,m,name);
},

f_mark:function(c,i,t,m,nm){
 var k, j=document.getElementsByClassName(nm+c+i+c), n=j.length;
  t=t<0?n:t+1; 
  for(k=0;k<t;k++) 
   if(m) j[k].className=j[k].className.replace("cl_"+c,""); 
   else j[k].className+=" cl_"+c;
}}
  
  
 
 
window.onload=function(){  

  // creo 4 tabelle di test  
  var n,rr,rc,y=0,s="",r=6,c=8,tx=["CROCE mode=0","ANGOLO mode=1","RIGA mode=2","COLONNA mode=3", ]; 
  for(n=0;n<tx.length;n++){ if(n==2) y=380;
   s+="<div style='position:absolute;left:"+(10+(n&1)*380)+"px;top:"+y+"px;font:bold 16px Arial;'>&nbsp;"+tx[n]+"<br><br><div style='border:1px solid #888;'>"+  
   "<table id='id_table"+n+"' cellpadding='12px' >";
    for(rr=0;rr<r;rr++) {
      s+="<tr>";
      for(rc=0;rc<c;rc++) s+="<td>"+(rr+""+rc)+"</td>";
      s+="</tr>";
    }
    s+="</table></div></div>";
  }
  document.getElementById("id_test").innerHTML=s;


  crossTab.Set('id_table0',0);    
  crossTab.Set('id_table1',1);    // attiva angolo tabella 2
  crossTab.Set('id_table2',2);    
  crossTab.Set('id_table3',3);    
}
 
 
</script>  
  </head>
  <body>

<h2>&nbsp;Colorare riga e colonna tabella</h2>
<div id='id_test' style="position:absolute;left:10px;top:64px;width:800px;height:600px;"></div>

  </body>
</html>

E se per quello ad ANGOLO mi servisse che la prima e la seconda cella della prima riga non vengano mai evidenziate, come devo modificare il codice?

**Tonenge** · 26-11-2014, 13:22

Ciao,
per escludere le celle sono "essenzialmente" necessarie le 2 if nel ciclo for della funzione f_mark.

Saluti.

codice:

<!DOCTYPE>
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>over tabella</title>
<style>
  
.cl_clr, .cl_clc { background-color:#DDD; font-weight:bold; cursor:pointer; }  
  
  
</style>
<script>

 
crossTab={

Set:function(name,mode){   // name=id tabella     mode:  0=CROCE  1=ANGOLO  2=RIGA   3=COLONNA
 mode=+mode;                         
 var r,c,o,j=document.getElementById(name);
  for(r=0;r<j.rows.length;r++) 
   for(c=0;c<j.rows[0].cells.length;c++){
    o=j.rows[r].cells[c];
    o.className+=" "+name+"clr"+r+"clr "+name+"clc"+c+"clc"; 
    o.onmouseover=function(){crossTab.f_ovr(0,this,name,mode)}
    o.onmouseout=function(){crossTab.f_ovr(1,this,name,mode)}
}},

f_ovr:function(m,o,name,mode){
 var c,cl=o.className,
  a=cl.split("clr"), r=+a[1], rr=r; 
  a=cl.split("clc"), c=+a[1], cc=c; 
  if(mode!=1) cc=-1, rr=-1;  
  if(mode!=3) crossTab.f_mark("clr",r,cc,m,name,mode);
  if(mode!=2) crossTab.f_mark("clc",c,rr,m,name,mode);
},

f_mark:function(c,i,t,m,nm,mode){
 var k, j=document.getElementsByClassName(nm+c+i+c), n=j.length;
  t=t<0?n:t+1; 
  for(k=0;k<t;k++) {
  
   if(c=="clr" && k<2 && !i && mode==1) continue;           // prime 2 celle escluse solo per mode ad angolo
   if(c=="clc" && !k && i<2 && mode==1) continue;
   
   if(m) j[k].className=j[k].className.replace("cl_"+c,""); 
   else j[k].className+=" cl_"+c;
  }
}}
  
  
 
 
window.onload=function(){  

  // creo 4 tabelle di test  
  var n,rr,rc,y=0,s="",r=6,c=8,tx=["CROCE mode=0","ANGOLO mode=1","RIGA mode=2","COLONNA mode=3", ]; 
  for(n=0;n<tx.length;n++){ if(n==2) y=380;
   s+="<div style='position:absolute;left:"+(10+(n&1)*380)+"px;top:"+y+"px;font:bold 16px Arial;'>&nbsp;"+tx[n]+"<br><br><div style='border:1px solid #888;'>"+  
   "<table id='id_table"+n+"' cellpadding='12px' >";
    for(rr=0;rr<r;rr++) {
      s+="<tr>";
      for(rc=0;rc<c;rc++) s+="<td>"+(rr+""+rc)+"</td>";
      s+="</tr>";
    }
    s+="</table></div></div>";
  }
  document.getElementById("id_test").innerHTML=s;

  crossTab.Set('id_table0',0);    
  crossTab.Set('id_table1',1);    // attiva angolo tabella 2
  crossTab.Set('id_table2',2);    
  crossTab.Set('id_table3',3);    
}
 
 
</script>  
  </head>
  <body>

<h2>&nbsp;Colorare riga e colonna tabella</h2>
<div id='id_test' style="position:absolute;left:10px;top:64px;width:800px;height:600px;"></div>

  </body>
</html>

**ikapata** · 26-11-2014, 13:24

Originariamente inviata da Tonenge

Ciao,
per escludere le celle sono "essenzialmente" necessarie le 2 if nel ciclo for della funzione f_mark.

Saluti.

codice:

<!DOCTYPE>
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>over tabella</title>
<style>
  
.cl_clr, .cl_clc { background-color:#DDD; font-weight:bold; cursor:pointer; }  
  
  
</style>
<script>

 
crossTab={

Set:function(name,mode){   // name=id tabella     mode:  0=CROCE  1=ANGOLO  2=RIGA   3=COLONNA
 mode=+mode;                         
 var r,c,o,j=document.getElementById(name);
  for(r=0;r<j.rows.length;r++) 
   for(c=0;c<j.rows[0].cells.length;c++){
    o=j.rows[r].cells[c];
    o.className+=" "+name+"clr"+r+"clr "+name+"clc"+c+"clc"; 
    o.onmouseover=function(){crossTab.f_ovr(0,this,name,mode)}
    o.onmouseout=function(){crossTab.f_ovr(1,this,name,mode)}
}},

f_ovr:function(m,o,name,mode){
 var c,cl=o.className,
  a=cl.split("clr"), r=+a[1], rr=r; 
  a=cl.split("clc"), c=+a[1], cc=c; 
  if(mode!=1) cc=-1, rr=-1;  
  if(mode!=3) crossTab.f_mark("clr",r,cc,m,name,mode);
  if(mode!=2) crossTab.f_mark("clc",c,rr,m,name,mode);
},

f_mark:function(c,i,t,m,nm,mode){
 var k, j=document.getElementsByClassName(nm+c+i+c), n=j.length;
  t=t<0?n:t+1; 
  for(k=0;k<t;k++) {
  
   if(c=="clr" && k<2 && !i && mode==1) continue;           // prime 2 celle escluse solo per mode ad angolo
   if(c=="clc" && !k && i<2 && mode==1) continue;
   
   if(m) j[k].className=j[k].className.replace("cl_"+c,""); 
   else j[k].className+=" cl_"+c;
  }
}}
  
  
 
 
window.onload=function(){  

  // creo 4 tabelle di test  
  var n,rr,rc,y=0,s="",r=6,c=8,tx=["CROCE mode=0","ANGOLO mode=1","RIGA mode=2","COLONNA mode=3", ]; 
  for(n=0;n<tx.length;n++){ if(n==2) y=380;
   s+="<div style='position:absolute;left:"+(10+(n&1)*380)+"px;top:"+y+"px;font:bold 16px Arial;'>&nbsp;"+tx[n]+"<br><br><div style='border:1px solid #888;'>"+  
   "<table id='id_table"+n+"' cellpadding='12px' >";
    for(rr=0;rr<r;rr++) {
      s+="<tr>";
      for(rc=0;rc<c;rc++) s+="<td>"+(rr+""+rc)+"</td>";
      s+="</tr>";
    }
    s+="</table></div></div>";
  }
  document.getElementById("id_test").innerHTML=s;

  crossTab.Set('id_table0',0);    
  crossTab.Set('id_table1',1);    // attiva angolo tabella 2
  crossTab.Set('id_table2',2);    
  crossTab.Set('id_table3',3);    
}
 
 
</script>  
  </head>
  <body>

<h2>&nbsp;Colorare riga e colonna tabella</h2>
<div id='id_test' style="position:absolute;left:10px;top:64px;width:800px;height:600px;"></div>

  </body>
</html>

Grazie mille!

Discussione: colorare riga e colonna tabella al passaggio del mouse

Strumenti discussione

Ricerca discussione

Visualizza

colorare riga e colonna tabella al passaggio del mouse

Permessi di invio