[Resolvido] Grid

Em funcionamento: http://hunternh.110mb.com/exemplos/grid.html

Utiliza a biblioteca jQuery: http://hunternh.110mb.com/exemplos/jquery-latest.pack.js

Utiliza a biblioteca jquery-dom: http://hunternh.110mb.com/exemplos/jquery-dom.js

/**************************************** Grid v1.0 ** Autor: Wagner B. Soares ****************************************/Grid = function(id){	// variável que receberá as funções privadas	var privado = new Object();	// recebe a div que será o container da tabela var parent = document.getElementById(id); if(typeof parent == 'undefined' || parent == null) return; // tabela principal que recebe o cabeçalho var tabHeader = jQuery.create("table", {}, ["thead", {}, [],"tbody", {"class":"tb"}, []]); // corpo que receberá as linhas da tabela	var tBody = jQuery.create("tbody", {"id":"tbody-"+id}, []);	// container utilizado se houver scroll	var sC = jQuery.create("div", {"class":"tabScroll"}, []);	// indica se haverá ou não scroll	var scroll = false;	// recebe as informações do cabeçalho	var cabecalho = new Array();	// recebe as informações da linhas da tabela	var corpo = new Array();	// recebe os tamanhos das colunas	var sizeCols = new Array;	// recebe o tamanho da tabela	var width = null;	// recebe o referência do próprio objeto Grid	var obj = this; // esconde o corpo da tabela principal	jQuery(".tb",tabHeader).each(function(){this.style.display = "none";}); // configura o rótulo da tabela	this.setCaption = function(x)	{ jQuery(tabHeader).prepend(jQuery.create("caption",{},[x]));	}; // configura os valores do cabeçalho	this.setHeaderValues = function(x)	{ cabecalho = (typeof x != 'undefined' && x != null) ? x : new Array(); var lineHead = document.createElement("tr"); for(var i in cabecalho) { celHead = jQuery.create("th", {"class":"tabela-coluna-"+i}, ["span", {}, []]); jQuery("span",celHead).html(cabecalho[i]); jQuery(lineHead).append(celHead); } jQuery("thead",tabHeader).append(lineHead); jQuery("th",tabHeader).each(function(){jQuery(this).css({borderTop:"1px solid #000000",borderBottom:"1px solid #000000",borderRight:"1px solid #000000",padding:"0px"});}); jQuery("th.tabela-coluna-0",tabHeader).each(function(){jQuery(this).css({borderLeft:"1px solid #000000"});});	}; // configura os valores das linhas da tabela	this.setRowsValues = function(x)	{ corpo = (typeof x != 'undefined' && x != null) ? x : new Array(); for(var i in corpo) { var lineBody = jQuery.create("tr", {"class":"tabela-linha-"+i}, []); for(var j in corpo[i]) { var celBody = jQuery.create("td", {"class":"tabela-coluna-"+j}, ["span", {}, []]); jQuery("span",celBody).html(corpo[i][j]); jQuery(lineBody).append(celBody); } jQuery(tBody).append(lineBody); } jQuery("td",tBody).each(function(){jQuery(this).css({borderBottom:"1px solid #000000",borderRight:"1px solid #000000",padding:"0px"});});	}; //configura os tamanhos das colunas	this.setSizeCols = function(x)	{ sizeCols = (typeof x != 'undefined' && x != null) ? x : new Array();	}; // configura os tamanhos e atributos da tabela	privado.setup = function()	{ var s = 0; var b = -1; width = 0; for(var i in sizeCols) { width += sizeCols[i]; jQuery("th.tabela-coluna-"+i,tabHeader).each(function(){jQuery(this).css({width:String(sizeCols[i]+b)+"px",borderCollapse:"collapse"});}); jQuery("td.tabela-coluna-"+i,tBody).each(function(){jQuery(this).css({width:String(sizeCols[i]+b)+"px",borderCollapse:"collapse"});}); jQuery("td.tabela-coluna-0",tBody).each(function(){jQuery(this).css({borderLeft:"1px solid #000000"});}); } if(scroll) s = 18; jQuery(parent).css({width:String(width+s)+"px",border:"0px"}); jQuery(sC).css({width:String(width+s)+"px",overflow:"auto"}); }; // configura o tamanho do scroll do corpo da tabela	this.setHeightScroll = function(h)	{ scroll = true; jQuery(sC).css({height:String(h)+"px"});	}; // adiciona uma nova linha na tabela	this.addLine = function(x)	{ var line = (typeof x != 'undefined' && x != null) ? x : new Array(); corpo[corpo.length] = line; var lineBody = jQuery.create("tr", {"class":"tabela-linha-"+i}, []); for(var i in line) { var celBody = jQuery.create("td", {"class":"tabela-coluna-"+i}, ["span", {}, []]); jQuery("span",celBody).html(line[i]); jQuery(lineBody).append(celBody); } jQuery(tBody).append(lineBody); jQuery("td",tBody).each(function(){jQuery(this).css({borderBottom:"1px solid #000000",borderRight:"1px solid #000000",padding:"0px"});}); jQuery("span",parent).each(function(){jQuery(this).css({padding:"3px",display:"block"});});	}; this.getHeaderValue = function(){return cabecalho;};	this.getRowsValue = function(){return corpo;}; // insere a tabela na tela e termina de configurá-la	this.draw = function()	{ privado.setup(); jQuery(parent).append(tabHeader); if(scroll) jQuery(parent).append(jQuery(sC).append(jQuery.create("table",{},[tBody]))); else jQuery(tabHeader).append(tBody); jQuery("table",parent).each(function(){jQuery(this).css({width:String(width)+"px",borderCollapse:"collapse",borderLeft:"1px solid #000000",marginLeft:"1px"});}); jQuery("span",parent).each(function(){jQuery(this).css({padding:"3px",display:"block"});});	};};