Javascript Map Html Table Highlight Cells By Column Respect Rowspans And Colspan

»»» shrink text ««« ««« enlarge text »»»

OBJECTIVE: given an html table, upon selection of any cell return all the cells that belong to its column, accounting correctly for rowspans and colspans.  
 
Related topic: Javascript Tablesort: Sort Table Cells Order By Cell Row Or Column.  
Note - an Internet Explorer conflict with a possibly future reserved keyword (enum) solved.  
 
Currently there aren't many online scripts for this purpose. It may be a daunting task.  
In fact whereas tables in javascript can easily be accessed by rows, no similar built-in method is provided to access tables by columns.  
Arguably this may depend on the somewhat ambiguous consensus about what may belong to a column and what may not whenever we are dealing with complex tables where cells span throughout each other in height (rowspans) and width (colspans) both: yet, for humans there are no doubts in this regard, and what makes the task somewhat difficult is exactly reproducing into a digital format this human spatial logic that infallibly assigns to a column only the right cells.

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

Remove colors  
INPUTS: only one argument to be passed upon construction. Such argument must be a valid table object, such as one grabbed via a getElementById statement.  
An example of construction where only the bold text terms are not to be changed:  
var foo=new tableMap( document.getElementById('tableId') );  
 
RETURNS: nothing.  
The class has only two methods named one column and the other columns (with a final s).  
Both methods require as argument a cell object (such as one grabbed via a getElementById statement) and return an array of cell objects - being these latter the cells piled as the column of the cell passed as argument:  
var foo = new tableMap(tableObject);  
var arrayOfCells = foo.columns(cellObject);  
 
The difference between these two methods is also what accounts for the aforementioned ambiguity about what by "column" may be meant in a table that includes rowspans and colspans (and why such a native method has not been implemented in javascript, arguably, whereas a method that does so by row has).  
In fact, whereas the first method selects as column only the piled cells (column) that match with the starting offset of the chosen cell, the second method selects as column all the piled cells that fall within the whole colspan scope (namely starting and ending offset both) of the chosen cell.  
 
If uncertain about the meaning of this differentiation, keep in mind that this variation in behaviour may be better appreciated, with the second method, only by picking a column that has a colspan of two or more: the fact the difference between these two spatial representations makes immediate sense to humans only when phenomenically reproduced, and yet it may be more difficult to be grasped and consolidated when facing abstract descriptions, is exactly what that notorious ambiguity is founded upon.  
 
CAVEATS: your table must be properly formatted, namely common mistakes like rowspans or colspans set to amounts that are not dutifully matched in the rest of the table structure (instance: a colspan of 4 cells yet the next row has less than 4 cells; or, again, the next row has colspans too but these latter are misaligned due to inconsistencies in the table layout implementation) should not be there or would propagate their errors to the function, with unpredictable results.  
 
The script produces a map (an array which is a property of each instance, and is named enums - and please never use just this.enum or the script may not work anymore, for that is an ECMAScript keyword reserved for future use and some browsers may apparently mix namespaces even if you'd use the keyword as an instance property and not as a window scoped element) that enumerates for each row all the possible cells as if no colspans would have been in place at all: given this fragmentation of each row into its higher possible granularity, it is also possible to use this enumeration as a shared transitional interface between one row and another regardless of the structural differences in colspans.  
As for rowspans, they are flung into the map as anticipations cast into the next mapped rows by each granular item currently inspected in the current table row.  
These two choices are the tactical devices upon which this solution is based.  
In this regard it may be important to emphasize that in javascript table cells are always exhibiting a cellspan and a rowspan, whose values are both equal to 1 even if they are not explicitly set (and if set they are equal to the assigned values, of course): therefore loops that inspect a cell colspan or rowspan would always iterate at least once.  
However since rowspans are meant to affect columns (the concern of this script) by replacing the cells of the next rows reallocating them with a projection of the current cell that intercepts ("row-spans") as many subsequent rows as its rowspan indicates, only rowspans above a value of 1 are of scripting interest, because any rowspan equal to 1 coincides with the current row and, spanning nowehere, may be ignored: thereforfe only the former are rowspans actually injected beyond the current row and consequently playing a role in the cell enumeration of the traversed rows; this reason is what accounts for the expression var a=1 when checking cell rowspans (a may be thought as a shorthand standing for: anticipate).  
Instead colspans are of scripting interest at all times, namely when their value is the default 1 too, whence the expression var s=0; in fact the tactic of enumerating cells until their maximum granularity is attained, implies that every scanned colspan must be disgregated into all of its unary components: those above 1 in order to be decomposed into as many singular virtual cells as the colspan above 1 declared, and those whose colspan value is limited to the default 1 in order to be maintained as such, and as such collected (and not ignored), representing one already granulated and fully valid cell to account for in the eventual enumeration.  
 
The generated map array enums addresses by each row index another array of cell slots, whose virtual indexes are such because the cell is represented as exploded into the highest allowable fragmentation; each of such items stores a pointer to the actual table cell that generated it.  
 
Strictly speaking, the derivation of a map of the table wouldn't be indispensable: a procedure that yields only the results, without outputting a map too, can be envisioned.  
However, generating such a map seems consistent not only with portability concerns (the map could be lent to other uses, and therefore having it ready for further purposes is useful) and with generalization purposes (an html table is, actually, a spreadsheet: if the map instead than storing cell pointers would have stored row and cell index numbers, full generalization disengaged by html environments could be attained), but this approach affords more manageable and clearer code too and, obviously, it considerably speeds up any subsequent calculation (the alternative being of remaking all the computations at each cell pick).  
The most consistent caveat in this respect is that if the table structure gets altered via scripting (by structure it is not meant the content of the cells, but any variation in rows and columns amount or span), then a brand new instance of the map must be generated - that is, in such case you have to dump any previous instance of this class and reinstantate. It is your responsibility, in case you alter the table dinamically, to remember to instantate anew:  
var foo=new tableMap(tableObject);  
//now some script changes the structure of the table  
foo=new tableMap(tableObject); //again; and any previously stored data about the old table, if present, is unreliable of course.  
 
Whenever you instantate a javascript class for the first time, you always ought to prefix the keyword var to the class instance (see example above). Beware that this may import scope visibility issues if you initialize within a function block.  
 
Although Javascript has a cellIndex built in property for table cells, currently it has no rowIndex property: this script adds such a property to each table cell (this wasn't an indispensable move in the least, but made slightly more practical using the class methods).  
 
Follows an example of use, with much html to produce a table suitable for testing purposes; the example runs the column method, to run the columns method locate where the line action=map.column is located and change it to action=map.columns:

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

Remove colors

Visitors: 10,607
Overall visits to all the topics: 4,953,132
Daily average (Calculated from the website subscription day): 2,058.66 Optional sorting commands:
Normal order: click here
Order by amount of visits: click here
Order by category: Programming Javascript
Current order: normal Other categories available for this author (Limited data report: 100):
Advice: Martial Arts and Self Defense(4), Books(236), Critical Reviews and Essays(4), Dictionaries(1), Emergency Care(4), Epistles Letters and Advice(5), Fantasy Epics and Fables(1), History and Documents(5), Humor and Jokes(2), Methematics(2), Music and Lyrics(6), News Digests and Press Reviews(1), Novels Poetry and Stories(3), Philosophy Reviews(7), Poetry(1), Programming(4), Programming Ajax(2), Programming Javascript(82), Programming Php(52), Psychology(1), Quotes(1), Religion Esoterica and Spirituality(12), Scientifical Reviews(4), Self Improvement(1), Sport Activities and Apparels(2), Tarots(1) Showing topics: 1, 10
Available total: 448 View only a list of the snippets by this author: click here.
Other topics available for this author: click on any title below to view the complete item: