meine erste selbst geschriebene Javascript-Klasse.

function Table(id) {
	this.rows = 0;
	this.cols = 0;
	if(id != null)
		this.table = document.getElementById(id);
}

Table.prototype = {
	createTable: function(parentElement,id,rows,cols,contentArray) {
		this.table = document.createElement("table");
		this.table.setAttribute("id",id);
		document.getElementById(parentElement).appendChild(this.table);

		for(var i_rows = 0; i_rows < rows; i_rows ++) {
			this.addRow(contentArray[i_rows*cols]);
		}

		var colArray = new Array();
		for(var i_cols = 1; i_cols < cols; i_cols ++) {
			for(var i_rows = 0; i_rows < rows; i_rows ++) {
				colArray[i_rows] = contentArray[i_rows*cols+i_cols];
			}
			this.addCol(colArray);
		}
	},

	addRow: function(content) {
		var newrow = document.createElement("tr");
		var existingRows = this.table.getElementsByTagName("tbody");

		if(this.rows == 0)
		{
			var newTbody = document.createElement("tbody");
			newTbody.appendChild(newrow);
			this.table.appendChild(newTbody);
			existingRows = this.table.getElementsByTagName("tbody");
			if(this.cols == 0)
				this.cols ++;
		}

		for(var i = 0; i < this.cols; i++) {
			newrow.appendChild(this.createNewCell(content[i]));
		}
		existingRows[0].appendChild(newrow);
		this.rows ++;
	},

	addCol: function(content) {
		if(this.rows == 0)
			this.addRow(content);
		else {
			var existingRows = this.table.getElementsByTagName("tr");
			for(var i = 0; i < this.rows; i++) {
				existingRows[i].appendChild(this.createNewCell(content[i]));
			}
			this.cols ++;
		}

	},

	setClass: function(css_class) {
		this.table.className = css_class;
	},

	createNewCell: function(content) {
		var newcell = document.createElement("td");
		var newcontent = document.createTextNode(content);

		newcell.appendChild(newcontent);
		return newcell;
	}
}

diese Klasse kann wie folgt aufgerufen werden

//hier muss schon folgendes im HTML-Code existieren:var table = new Table('mytable');
table.addRow('1');
table.addCol('2');
table.addCol('3');
table.addRow(new Array('4','5','6'));
table.addCol(new Array('7','8'));
table.addRow(new Array('9','10','11','12'));
table.setClass('border');

//oder so, wenn noch nichts exisitert außer z.B.
var table1 = new Table();
content = new Array('1','2','3','4',
	'5','6','7','8',
	'9','10','11','12');
table1.createTable('parent','table1',3,4,content);
table1.setClass('border');

Viel Spaß damit!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert