Javascript Classe Tabela [Javascript]

Javascript Classe Tabela

Publicado por Emiliano Eloi Silva Barbosa 04/02/2008

[ Hits: 6.320 ]

Homepage: http://emilianoeloi.com.br

Download tabela.html

0 0

Denuncie Favoritos Indicar

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

Carregamento

Barra de Status

Identificando o navegador do cliente

Carregar dados a partir de JSON

Var_dump

Comentários

Nenhum comentário foi encontrado.