Documentation

Note : a HTMLTableCellElement is any <TD> or <TH> element.

Matrix

A matrix is the Array representation of a table (vs the DOM representation of a table). It is the core of this library. TableObject.matrix() returns an Array of Arrays of Objects. Each subarray represents a row and each object a cell. Cells that span more than a row or more than a col are represented as "Ghost object" that references the original cell. A normal Cell Object look like this :

{
    cell : a <TD> or <TH> element,
    x : column number,
    y: row number
}

A Ghost Cell Object look like this :

{
    refCell : a Cell Object,
    x : column number,
    y: row number
}

A
B	C	D	E	F
	H	I	J	K
	L	M	N	O
	P	Q	R	S

Log matrix to console

Accessing cells

You can also access to the HTMLTableElement with the TableObject.element property.

Cell's position

A
B	C	D	E	F
	H	I	J	K
	L	M	N	O
	P	Q	R	S

Position : (1,1)

var table = new Table(document.getElementById('table-position'));
function position(){
	var cell = table.element.querySelector(".selected");
	if(cell){
		var position = table.position(cell);
		document.getElementById('position-x').innerHTML = position.x;
		document.getElementById('position-y').innerHTML = position.y;
	}
}

Inserting and removing rows and columns

A
B	C	D	E	F
	H	I	J	K
	L	M	N	O
	P	Q	R	S

Insert row before Insert row after Remove row

Insert column before Insert column after Remove column

var table = new Table(document.getElementById('table-row-col'));
function rowBefore(){
	var cell = table.element.querySelector(".selected");
	if(cell){
		var position = table.position(cell);
		table.insertRow(position.y, function(cell){
			cell.innerHTML = "0";
		})
	}
}
function rowAfter(){
	var cell = table.element.querySelector(".selected");
	if(cell){
		var position = table.position(cell);
		table.insertRow(position.y+cell.rowSpan, function(cell){
			cell.innerHTML = "0";
		})
	}
}
function removeRow(){
	var cell = table.element.querySelector(".selected");
	if(cell){
		var position = table.position(cell);
		table.removeRow(position.y)
	}
}
function colBefore(){
	var cell = table.element.querySelector(".selected");
	if(cell){
		var position = table.position(cell);
		table.insertCol(position.x, function(cell){
			cell.innerHTML = "0";
		})
	}
}
function colAfter(){
	var cell = table.element.querySelector(".selected");
	if(cell){
		var position = table.position(cell);
		table.insertCol(position.x+cell.colSpan, function(cell){
			cell.innerHTML = "0";
		})
	}
}
function removeCol(){
	var cell = table.element.querySelector(".selected");
	if(cell){
		var position = table.position(cell);
		table.removeCol(position.x)
	}
}

Merging and splitting cells

1	2	3	4	5
1	2	3	4	5
1	2	3	4	5
1	2	3	4	5
1	2	3	4	5

Merge Split Group

var table = new Table(document.getElementById('table-merge-split'));
function merge(){
	var cells = table.element.querySelectorAll(".selected");
	table.merge(cells, function(colspan, rowspan, kept, removed){
		var content = kept.innerHTML;
		for(var i=0;i<removed.length;i++){
			content += " " + removed[i].innerHTML;
		}
		kept.innerHTML = content;
	})
}

var table = new Table(document.getElementById('table-merge-split'));
function split(){
	var cells = table.element.querySelectorAll(".selected");
	table.split(cells, function(newcell){
		newcell.innerHTML = "New";
		newcell.classList.add("selected");
	})
}

You should normalize your table after merging cells.

Normalizing a table

Normalizing a table means four things :

1. Adjusting the rowspan value of each cell to its minimal value;
2. Adjusting the colspan value of each cell to its minimal value;
3. Removing empty <TR> elements;
4. If there are missing cells in a row, expanding the colspan value of the last cell of this row.

1	2	3	4
1	2	3
1	2	3	4	5
1	2	3	4
1	2	3	4	5

Normalize

var table = new Table(document.getElementById('table-normalize'));
function normalizeTable(){
	table.normalize();
}