Quote Originariamente inviata da Tonenge Visualizza il messaggio
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?