29. Juli 2011 | lukas | Leave a comment 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! Teilen mit:Klick, um über Twitter zu teilen (Wird in neuem Fenster geöffnet)Klick, um auf Facebook zu teilen (Wird in neuem Fenster geöffnet)Gefällt mir:Gefällt mir Wird geladen... Ähnliche Beiträge