Free Code Collection

Many time we require to create dynamic table, in javascript which require lot of effort. To ease this I have created function which helps the generate DOM table just passing table id, column headings as array and row data as 2D array. It will return a whole DOM table object which can be append and add in any parent object. CSS can be added as per choice by giving obj.className.

Code as follows:

 Javascript | 
 copy code |
?
 
01
/**
02
 * Create dynamic table 
03
 *Author M Hussain
04
 * @param  tableName String
05
 * @param  columnHeading Array
06
 * @param  rowdata 2DArray
07
 */
08
 
09
function dynamicTable(tableName, columnHeading, rowdata){
10
	var oTable 	= document.createElement("table");
11
//	oTable.style.border = '1px solid blue'
12
	oTable.id 	= tableName;
13
	oTable.cellPadding=0;
14
	oTable.cellSpacing=1;
15
	var oTbody 	= document.createElement('tbody');
16
	var oCell;
17
	var i, j;
18
	//creating columnheading
19
	var oHeadingRow = document.createElement('tr');
20
	//oHeadingRow.style.background="#f78a39";
21
	//oHeadingRow.style.color="#fff";
22
	oHeadingRow.className = "browseListHeader";
23
	oHeadingRow.style.height	= "14px";
24
	var paramHeading 
25
	for(i=0;i<columnHeading.length;i++){
26
		/*
27
			Adding Sorting functionality
28
		*/
29
		paramHeading		= columnHeading[i].replace(/ /g,"_");
30
		var oCol 			= document.createElement('th');
31
		oCol.style.paddingLeft	= "2px";
32
		oCol.className			= "tableText";
33
		oCol.id					= paramHeading;		
34
		var oA					= document.createElement('a');
35
		oA.innerHTML			= columnHeading[i];
36
 
37
		oHeadingRow.appendChild(oCol);
38
	}
39
	oTbody.appendChild(oHeadingRow);
40
 
41
	//creating row as passed by rowdata
42
	for(i=0;i<rowdata.length;i++){
43
		var oRow = document.createElement('tr');
44
		if(i%2){
45
			oRow.className = "browseRow2";
46
		}
47
		else{
48
			oRow.className = "browseRow1";
49
		}
50
		oRow.style.height	= "10px";
51
		var test = rowdata[i];
52
		for(j=0;j<test.length;j++){
53
			var oCol 	= document.createElement('td');
54
			//oCol.style.borderBottom	= "1px solid #000000";
55
			oCol.style.paddingLeft	= "2px";
56
			oCol.className			= "tableText";
57
			var oTxt 	= document.createTextNode(rowdata[i][j]);
58
			oCol.appendChild(oTxt);
59
			oRow.appendChild(oCol);
60
		}
61
		oTbody.appendChild(oRow);
62
	}
63
	oTable.appendChild(oTbody);
64
	return oTable;
65
}
66