Javascript Classe Tabela
Publicado por Emiliano Eloi Silva Barbosa 04/02/2008
[ Hits: 6.282 ]
Homepage: http://emilianoeloi.com.br
Classe que gera tabela usando DOM.
Escrita utilizando prototype.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Classe Tabela</title> <meta name="resource-type" content="document" /> <meta http-equiv="pragma" content="no-cache" /> <meta name="revisit-after" content="1" /> <meta name="classification" content="Javascript Classe tabela" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta name="robots" content="All" /> <meta name="distribution" content="Global" /> <meta name="author" content="Emiliano Eloi Silva Barbosa" /> <meta name="language" content="pt-br" /> <style> /* TagBox table styles written by TagBox http://www.tagbox.de */ table { border-collapse: collapse; border: 1px solid #03476F; font: normal 11px verdana, arial, helvetica, sans-serif; color: #363636; background: #92C428; } caption { text-align: center; font: bold 18px arial, helvetica, sans-serif; background: transparent; padding:6px 4px 8px 0px; color: #03476F; text-transform: uppercase; } td, th { border: 1px dotted #03476F; padding: .4em; color: #363636; } thead th, tfoot th { font: bold 11px verdana, arial, helvetica, sans-serif; border: 1px solid #03476F;; text-align: left; background: #4591AD; color: #FFFFFF; padding-top:3px; } tbody td a { background: transparent; text-decoration: none; color: #363636; } tbody td a:hover { background: #C2F64D; color: #363636; } tbody th a { font: normal 11px verdana, arial, helvetica, sans-serif; background: transparent; text-decoration: none; font-weight:normal; color: #363636; } tbody th a:hover { background: transparent; color: #363636; } tbody th, tbody td { vertical-align: top; text-align: left; } tfoot td { border: 1px solid #03476F; background: #4591AD; padding-top:3px; color: #FFFFFF; } .odd { background: #AEE239; } tbody tr:hover { background: #FFD800; border: 1px solid #03476F; color: #FFFFFF; } tbody tr:hover th, tbody tr.odd:hover th { background: #FFD800; color: #FFFFFF; } </style> <script> /** * Classe Tabela * @author Emiliano ESB * @since 2008-01-16 */ Tabela = function() {}; with({t:Tabela.prototype}){ /** * Referência do elemento pai da tabela */ t.elementoPai = null; /** * Sumario da tabela */ t.sumario = null; /** * id da tabela */ t.idTabela = null; /** * Elemento Tabela */ t.tabela = document.createElement("table"); /** * Elemento caption */ t.caption = document.createElement("caption"); /** * Elemento thead */ t.thead = document.createElement("thead"); t.arrThead = new Array(); /** * Elemento tbody */ t.tbody = document.createElement("tbody"); t.arrTbody = new Array(); /** * Elemento tfoot */ t.tfoot = document.createElement("tfoot"); t.arrTfoot = new Array(); /** * Adicionar Cabeçalho * @param int linha * @param string cabecalho */ t.adiCabecalho=function(l,c){ if(t.arrThead[l] == null) t.arrThead[l]=new Array(); t.arrThead[l][ t.arrThead[l].length ] = c; } /** * Adicionar Body (dados do corpo da tabela) * @param int linha * @param string celula */ t.adiCorpo=function(l,b){ if(t.arrTbody[l] == null) t.arrTbody[l]=new Array(); t.arrTbody[l][ t.arrTbody[l].length ] = b; } /** * Adicionar Foot (rodapé da tabela) * @param int linha * @param string celula */ t.adiRodape=function(l,r){ if(t.arrTfoot[l] == null) t.arrTfoot[l]=new Array(); t.arrTfoot[l][ t.arrTfoot[l].length ] = r; } /** * monta cabecalho Cabeçalho * @param string cabecalho */ t.getCabecalho=function(){ var i, j; for(i=0; i<t.arrThead.length;i++){ var tr = document.createElement("tr"); for(j=0;j<t.arrThead[i].length;j++){ var th = document.createElement("th"); var conteudo = document.createTextNode(t.arrThead[i][j]); th.appendChild(conteudo); tr.appendChild(th); } t.thead.appendChild(tr); } } /** * monta corpo da tabela */ t.getCorpo=function(){ var i, j; for(i=0; i<t.arrTbody.length;i++){ var tr = document.createElement("tr"); for(j=0;j<t.arrTbody[i].length;j++){ var td = document.createElement("td"); var conteudo = document.createTextNode(t.arrTbody[i][j]); td.appendChild(conteudo); tr.appendChild(td); } t.tbody.appendChild(tr); } } /** * monta rodapé da tabela */ t.getRodape=function(){ var i, j; for(i=0; i<t.arrTfoot.length;i++){ var tr = document.createElement("tr"); for(j=0;j<t.arrTfoot[i].length;j++){ var th = document.createElement("th"); var conteudo = document.createTextNode(t.arrTfoot[i][j]); th.appendChild(conteudo); tr.appendChild(th); } t.tfoot.appendChild(tr); } } /** * Renderizar tabela * @param elemento pai */ t.renderizar=function(p){ try{ t.tabela.setAttribute("summary", t.sumario); t.tabela.appendChild(t.caption); t.getCabecalho(); t.tabela.appendChild(t.thead); t.getRodape(); t.tabela.appendChild(t.tfoot); t.getCorpo(); t.tabela.appendChild(t.tbody); p.appendChild(t.tabela); }catch(e){ alert("{xxx}\n\n"+e+"\n\nERRO. Entre em contato com o {xxx}."); } } } /** * Sistema */ Sistema = function() {}; with({$:Sistema.prototype}){ $.load=function(){ var tbl = new Tabela(); tbl.adiCabecalho(0,"Distribuição"); tbl.adiCabecalho(0,"Versão"); tbl.adiCorpo(0,"Slackware"); tbl.adiCorpo(0,"12"); tbl.adiCorpo(1,"Gentoo"); tbl.adiCorpo(1,"2007"); tbl.adiRodape(0,"total"); tbl.adiRodape(0,"2"); tbl.renderizar(document.getElementsByTagName("body")[0]); } } var sis = new Sistema(); </script> </head> <body onload="sis.load();"> </body> </html>
Identificando o navegador do cliente
proteção contra cópia com alerta
Nenhum comentário foi encontrado.
Enviar mensagem ao usuário trabalhando com as opções do php.ini
Meu Fork do Plugin de Integração do CVS para o KDevelop
Compartilhando a tela do Computador no Celular via Deskreen
Como Configurar um Túnel SSH Reverso para Acessar Sua Máquina Local a Partir de uma Máquina Remota
Configuração para desligamento automatizado de Computadores em um Ambiente Comercial
Compartilhamento de Rede com samba em modo Público/Anônimo de forma simples, rápido e fácil
Cups: Mapear/listar todas as impressoras de outro Servidor CUPS de forma rápida e fácil
Criando uma VPC na AWS via CLI
Arch Linux - Guia para Iniciantes (2)
Problemas ao instalar o PHP (11)
Tem como instalar o gerenciador AMD Adrenalin no Ubuntu 24.04? (15)
Tenho dois Link's ( IP VÁLIDOS ), estou tentando fazer o failover... (0)