Viltér Panitz: março 2010

Os códigos abaixo, mostrarão como manipular uma tabela, utilizando apenas JavaScript.

Em primeiro lugar, vamos criar uma página simples em html. Nele existiram dois combos que, conforme a seleção, irão montar uma tabela.

Arquivo HTML

<head>
 		<script src="temp.js" type="text/javascript"></script>
 		<link rel="stylesheet" href="fontes.css">
 	</head>
 <body>
 	<input type="hidden" name="resultSelecao" id="resultSelecao" value="">
 		Combos:
 		<table border="1" cellpadding="0" cellspacing="0" height="5%" width="40%">
 			<tr>
 				<td width="20px">
 					Posto de Gasolina:
 				</td>
 				<td>
 					<select id="postoGasolina" name="postoGasolina" onChange="habilitar('assoc')">
 						<option>Selecione</option>
 						<option value="1">BR</option>
 						<option value="2">Shell</option>
 						<option value="3">Esso</option>
 						<option value="4">Texaco</option>
 					</select>
 				</td>
 		 </tr>
 			
 			<tr>
 				<td>
 					Combustível:
 				</td>
 				<td>
 					<select id="combustivel" name="combustivel" onChange="habilitar('assoc')">
 						<option value="1">Selecione</option>
 						<option value="2">Gasolina</option>
 						<option value="3">Alcool</option>
 						<option value="4">Diesel</option>
 						<option value="5">GNV</option>
 					</select>
 				</td>
 		 </tr>
 			<tr>
 				<td colspan="2" align="center"> <input type="button" id="assoc" name="assoc" value="Associar" onClick="this.disabled=true; TabelaTemp.montarTabela()"></td>
 			</tr>
 			<tr>
 				<td colspan="2">
 					<table border="1" id="mTable" cellpadding="0" cellspacing="0" style="display:none" height="5%" width="100%">
 						<tr style="height:10" class="labeltabela">
 							<td></td>
 							<td>Posto de Combustível</td>
 							<td>Combustível</td>
 						</tr>
 					</table>
 				</td>
 			</tr>
 		</table>
 	</body>

Para não ficar tão "cru" nossa tabela, vamos criar um arquivo CSS com dois estilos de linha.
Cada linha será de uma cor.

Arquivo CSS

Agora, vamos para o X da questão. Nós iremos criar um arquivo JS que será responsável por montar nossa tabela.
Este é fonte completo dele. Abaixo, explicarei um pouco mais sobre cada um das funções criadas.
Arquivo JS

Função Montar Tabela:

Esta função servirá apenas de "porta de entrada" do nosso arquivo html.
Ele basicamente irá buscar os elementos pelo ID para posteriormente criarmos a nossa tabela, com base no que for selecionado nas combos.

Função Montar:

Esta função será chamada através da montarTabela(função anterior), passando por parametro os elementos que irão criar nossa tabela.

Está tabela, possuirá N linhas e três colunas.
Uma para remoção (através de um Radio Button), e as outras duas para criação dos relacionamentos das combos.

montar:function(id,posto,combustivel,css){
 
 tblBody = document.getElementById('mTable').tBodies[0];
 newRow = tblBody.insertRow(-1); // Nova linha
 newRow.className = css; // CSS da linha
 newCell = newRow.insertCell(0);// Nova Coluna
 newCell.innerHTML = '<input type="radio" id='+id+' onClick="TabelaTemp.removeRow(\'mTable\',this.id)"/>'; // Elemento da Coluna
 newCell_2 = newRow.insertCell(1); // Nova coluna 
 newCell_2.innerHTML = 'Posto - '+posto;//Texto da coluna
 newCell_3 = newRow.insertCell(2); // Nova Coluna
 newCell_3.innerHTML = 'Combustível - '+combustivel; // Texto da Coluna
 
 /*Atribuição em um elemento Hidden, para manipular o resultado. Este será um array que será enviado junto com o formulário inteiro para persistir o resultado do relacionamento*/
 if(document.getElementById('resultSelecao').value == ""){
 document.getElementById('resultSelecao').value+=id;
 }else{
 document.getElementById('resultSelecao').value+=","+id;
 }
 
 },

Função RemoveRow:

Informamos apenas o ID da tabela, para podermos itera-la, e o ID do elemento a ser removido.

removeRow:function(tbl,id){
 var table = document.getElementById(tbl);
 try {
 for(i=0; i < table.rows.length;i++){// Para cada Linha
 for(j = 0; j < table.rows[i].cells.length; j++){ // Para cada Coluna
 for(k = 0; k< table.rows[i].cells[j].childNodes.length; k++){// Cada elemento da Coluna
 objeto = table.rows[i].cells[j].childNodes[k];
 if(objeto){ // Se não for Undefined
 if(id == objeto.id){ // Verifica o ID
 table.deleteRow(i); // Exclui a Linha
 							 if(table.rows.length==1){// Verifica se existe apenas a linha de cabeçalho. 
 									table.style.display='none';// Esconde a tabela
 								}
 }
 }
 }
 }
 }
 }
 catch (ex) {
 return false; //Ops....
 }
 },

A função Habilitar server apenas para inibir a possibilidade de um duplo clique no botão de associação

Viltér Panitz

domingo, 28 de março de 2010

JavaScript - Propriedade dos Elementos

JavaScript - Sistema Operacional

Manipulando Botão de Fechar

Manipulando Tabelas com InnerHtml

Seguidores

Total de visualizações de página