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;'> "+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> Colorare riga e colonna tabella</h2>
<div id='id_test' style="position:absolute;left:10px;top:64px;width:800px;height:600px;"></div>
</body>
</html>
Rispondi quotando
Originariamente inviata da Tonenge
