Tabelas com JavaScript

Nesta classe podemos manipular uma tabela por completo.
Basta criar uma instância new tabela e usar seus recursos.


function tabela (){

/*
Criado por Fábio Paiva
www.fabiopaiva.com
28/01/09
classe para manipulação de tabelas
*/
	var tabela = document.createElement("table");
	var tab = document.createElement("tbody");
	tabela.appendChild(tab);	
	this.set_id = set_id;
	this.inserir = inserir;
	this.add_th = add_th;
	this.add_td = add_td;
	this.classe = classe;
	this.add_css= add_css;
	this.set_cellpadding = set_cellpadding;
	this.set_cellspacing = set_cellspacing;
	this.alinhamento = alinhamento;
	this.borda = borda;
	this.zebrada = zebrada;

	function zebrada(cor1,cor2){
		var trs = tabela.getElementsByTagName("tr");
		for(i=0;i<trs.length;i++)
			if(i%2==0)
				trs[i].style.backgroundColor = cor1;
			else
				trs[i].style.backgroundColor = cor2;
	}
		 
	function add_th(ths){/*ths deve ser um array de conteúdo*/
		var tr = document.createElement("tr");
		for(i=0;i<ths.length;i++){
			var th = document.createElement("th");
			var txt = document.createTextNode(ths[i]);
			th.appendChild(txt);
			tr.appendChild(th);
			}
		tab.appendChild(tr);
		}
		
	function add_td(tds){/*tds deve ser um array de conteúdo*/
		var tr = document.createElement("tr");		
		for(i=0;i<tds.length;i++){
			var td = document.createElement("td");
			var txt = document.createTextNode(tds[i]+" ");
			td.appendChild(txt);			
			tr.appendChild(td);
			}
		tab.appendChild(tr);
		}
		 
	function classe(nome_class){
		tabela.className = nome_class;
		}
	function borda(tam){
		tabela.border = tam;
	}	
	function set_id(nome){
		tabela.name = nome;
		tabela.id=nome;			
		}
		
	function inserir(id){/*id do objeto que receberá a tabela*/
		if(document.getElementById(id))
			document.getElementById(id).appendChild(tabela);
		}	
	function add_css(css){
		tabela.style.cssText += css;
		}
	function set_cellpadding(tam)
	{
		tabela.cellPadding=tam;
		}
	function set_cellspacing(tam)
	{
		tabela.cellSpacing=tam;
		}
	function alinhamento(dir)
	{
		tabela.align = dir;
		}
}

Uso:

<input type="button" value="Teste" onclick="insere_tabela()"/>
<div id='recebe_tabela'></div>

<script type="text/javascript">
function insere_tabela(){
	tab = new tabela()
	tab.set_cellpadding(0);
	tab.set_cellspacing(0);
  	tab.add_css("width:80%;");
  	tab.alinhamento("center");
	tab.set_id("tab_grade");
  	tab.classe("grade");
	//cabeçalho
	var tab_ths = new Array("Produto","Preço");
	tab.add_th(tab_ths);
	var tds = new Array("DVD Third Day","R$54,00");
	tab.add_td(tds); 
 	var tds = new Array("DVD Hillsong","R$49,00");
	tab.add_td(tds);
 	var tds = new Array("Livro Os caçadores de Deus","R$40,00");
	tab.add_td(tds); 
	var tds = new Array("Bíblia sagrada","R$19,00");
	tab.add_td(tds);
	tab.zebrada("#F4F4FF","#ECFFF1");
	tab.inserir("recebe_tabela");
}
</script>

Teste

Comentários

Adicionar novo

Busca