colorare riga e colonna tabella al passaggio del mouse

**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

Hybrid View

Permessi di invio