Ah grazie - beh in tal caso allora merita riprodurre i codici anche qui (sia come gesto di riconoscenza per averlo aggiunto, sia per motivi pratici: avere i codici su due server è a questo punto utile se lo script viene segnalato agli utenti come utile), mentre per la documentazione dettagliata rinvio al link del primo post.
unica cosa, mi ha richiesto parecchio lavoro per cui se viene usato, qualora possibile, è gradito se chi lo usa o mantiene il commento o mette un link (magari nella vostra pagina "siti suggeriti" o simili) alla pagina menzionata nel primo post:
codice:
function tableMap(table/*OBJECT*/){//2.0.1
this.construct=function(t){
this.enums=[];
for(var r=0, sum=0; r<t.rows.length; r++, sum=0){ if(!this.enums[r]){this.enums[r]=[];};
for(var c=0; c<t.rows[r].cells.length; c++){ t.rows[r].cells[c].rowIndex=r;//opportunistic cell addon
var s=0;
for(; s<t.rows[r].cells[c].colSpan; s++){/*enumerating:*/
var e=sum+s;
while(this.enums[r][e]/*met rowspan curtain*/){++e; ++sum;};
for(var a=1; a<t.rows[r].cells[c].rowSpan; a++){ if(!this.enums[r+a]){this.enums[r+a]=[]};
/*rowspan: anticipate cells:*/this.enums[r+a][e]=t.rows[r].cells[c];
}
this.enums[r][e]=t.rows[r].cells[c];
}
sum+=s;
}
}
/*keep this comment to reuse freely:
http://www.fullposter.com/?1 */}
this.construct(table);
/***Method:***/
this.column=function(cell/*OBJECT*/){ var col=[]; var i=0; for(; i<this.enums[cell.rowIndex].length; i++){ if(this.enums[cell.rowIndex][i]==cell){break;}}
for(var a=0; a<this.enums.length; a++){col[++col.length-1]=this.enums[a][i];} return col; }
/***Method:***/
this.columns=function(cell/*OBJECT*/){ var col=[]; var i=0; for(; i<this.enums[cell.rowIndex].length; i++){ if(this.enums[cell.rowIndex][i]==cell){break;}}
for(var a=0; a<this.enums.length; a++){ for(var s=0; s<cell.colSpan; s++){ col[++col.length-1]=this.enums[a][i+s]; } } return col; }
}
Per l' html e i test, ecco il codice - che usa il metodo "column", per utilizzare il metodo "columns" sostituirlo nella espressione
action=map.column
aggiungendo la s
codice:
<script>
//REMEMBER to incude your function here, then:
</script>
click on any cell: <table border="2" cellspacing="6" cellpadding="6" id="foo" style="background-color:#dddddd; font-weight: bold;">
<tr>
<td>row0 cell 0</td>
<td>r0 c0</td>
<td>r0 c1</td>
<td colspan="4">r0 c2</td>
<td>r0 c6</td>
<td>r0 c7</td>
<td rowspan="2">r0 c8</td>
<td>r0 c9</td>
</tr>
<tr>
<td>row1 cell 0</td>
<td rowspan="4">r1 c0</td>
<td colspan="3" rowspan="3">r1 c1</td>
<td colspan="3">r1 c4</td>
<td>r1 c7</td>
<td>r1 c9</td>
</tr>
<tr>
<td>row2 cell 0</td>
<td>r2 c4</td>
<td colspan="3" rowspan="3">r2 c5</td>
<td>r2 c8</td>
<td>r2 c9</td>
</tr>
<tr>
<td>row3 cell 0</td>
<td>r3 c4</td>
<td>r3 c8</td>
<td>r3 c9</td>
</tr>
<tr>
<td>row4 cell 0</td>
<td>r4 c1</td>
<td colspan="3" rowspan="2">r4 c2</td>
<td>r4 c8</td>
<td>r4 c9</td>
</tr>
<tr>
<td>row5 cell 0</td>
<td>r5 c0</td>
<td>r5 c1</td>
<td>r5 c5</td>
<td>r5 c6</td>
<td colspan="3">r5 c7</td>
</tr>
<tr>
<td>row6 cell 0</td>
<td>r7 c0</td>
<td>r7 c1</td>
<td>r7 c2</td>
<td>r7 c3</td>
<td>r7 c4</td>
<td>r7 c5</td>
<td>r7 c6</td>
<td>r7 c7</td>
<td>r7 c8</td>
<td>r7 c9</td>
</tr>
</table>
<script>
var map=new tableMap(document.getElementById('foo'));
for(var i=0; i<document.getElementById('foo').rows.length; i++){
for(var ii=0; ii<document.getElementById('foo').rows[i].cells.length; ii++){
document.getElementById('foo').rows[i].cells[ii].onclick=
function(){
/*reset cell colors before highlighting*/
for(var reset=0; reset<this.parentNode.parentNode.rows.length; reset++){
for(var reset2=0; reset2<this.parentNode.parentNode.rows[reset].cells.length; reset2++){
this.parentNode.parentNode.rows[reset].cells[reset2].style.backgroundColor='#ffffff';
}
}
/*resetting done*/
var action=map.column(this);/*change column into columns to use the second method*/
for(var h=0; h<action.length; h++){action[h].style.backgroundColor='#ff0000';}
this.style.backgroundColor='#bb0000';/*slightly differentiate currently clicked for testing purposes*/
};
}
}
</script>
Rispondi quotando
