Javascript Classe Tabela

Publicado por Emiliano Eloi Silva Barbosa 04/02/2008

[ Hits: 6.247 ]

Homepage: http://emilianoeloi.com.br

Download tabela.html




Classe que gera tabela usando DOM.

Escrita utilizando prototype.

  



Esconder código-fonte

<!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>

Scripts recomendados

Validar CPF

MinApp

getNodesBy NameIndexed

Proteção contra cópia sem alerta

Atualização de combos inferiores baseado nos combos superiores


  

Comentários

Nenhum comentário foi encontrado.


Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts