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; }
}

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