Javascript Classe Tabela
Publicado por Emiliano Eloi Silva Barbosa 04/02/2008
[ Hits: 6.257 ]
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>
Mouse com frase girando em torno
Menu DHTML - Abre/fecha com clique do mouse
Plugin para ordenar, paginar e pesquisar em tabelas HTML
Nenhum comentário foi encontrado.
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
Como renomear arquivos de letras maiúsculas para minúsculas
Imprimindo no formato livreto no Linux
Vim - incrementando números em substituição
Efeito "livro" em arquivos PDF
Como resolver o erro no CUPS: Unable to get list of printer drivers
Acabei de formatar meu ssd e deu erro (3)
Desempenho abaixo do esperado - travadas e congelamento do sistema ope... (5)
Bash ao invés de Fish no CachyOS (1)
[Python] Automação de scan de vulnerabilidades
[Python] Script para analise de superficie de ataque
[Shell Script] Novo script para redimensionar, rotacionar, converter e espelhar arquivos de imagem
[Shell Script] Iniciador de DOOM (DSDA-DOOM, Doom Retro ou Woof!)
[Shell Script] Script para adicionar bordas às imagens de uma pasta