Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Felipe Batista

Como faço uma tabela dinâmica rápida!

Por , em ASP Clássico

Recommended Posts

Felipe Batista    0

Felipe Batista
Postado

Boa tarde amigos.

 

Estou desenvolvendo um sitema e preciso que fique desta maneira, ou bem parecido com isto. Tenho vários cursos e neles vários modulos e dentro desses modulos a pessoa pode escolher em qual horário prefere estudar veja um exemplo em (http://www.impacta.com.br/treinamentos/trn_Treinamento.asp?est=sp&IDT=788). A minha tabela estaria pensando em fazer da seguinte maneira.

 

Imagem Postada

 

Onde tem *** é onde o administrador pode escrever e quando clica em inserir linha abre mais espaço para ele escrever e quando ele terminar clica em enviar e pronto, cria um arquivo em txt mesmo.

 

Se alguém puder me ajudar com esta idéia, ou quiser me mostrar uma legal! Valeu!

 

T+

 

Atenciosamente,

Felipe Batista

Compartilhar este post

Link para o post
Compartilhar em outros sites

Shison    0

Shison
Postado

Olá colega.

Para fazer isto você deve trabalhar com DHTML, utilizando Javascript.

Já para persistir os dados no BD você pode trabalhar do modo usual com formulários e tudo mais ou então utilizar AJAX.

 

procure mais detalhes nos fóruns de Javascript/DHTML e AJAX.

http://forum.imasters.com.br/index.php?showforum=6

 

 

boa sorte.

até mais.

Compartilhar este post

Link para o post
Compartilhar em outros sites

<%Rafael%>    0

<%Rafael%>
Postado

Você vai precisar de duas coisas:1 - DOMPara, ao clicar no botão "inserir", ele "criar" mais uma linha com os campos que serão enviados...Exemplo:function criaLinha(){d = document.getElementsById("minhaid");d.innerHTML("Data: <input type='text' name='data' /> - Hora: <input type='text' name='hora' />")}Lógico, isso é só para ter idéia do que será preciso...2 - AJAX (ou não)Onde irá recuperar os dados do form criado e irá salvar no seu banco de dados (ou criar o txt com o ASP)...AbraçoS!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Schneider    0

Schneider
Postado

A algum tempo tive que fazer algo parecido para um cliente. Você pode fazer de duas formas.

 

Uma delas é com javascript e DOM, como disse o rafael. assim você teria, digamos assim, um real dinamismo. Uma outra forma mais simples mas não muito aconselhável seria quando você clicar em 'Inserir Linha', postar para um iframe os dados necessários para a página asp montar a tabela novamente, porém com a nova linha...

 

o exemplo que darei é com javascript. É um exemplo simples, mas estudando o código abaixo você verá como não é dificil melhorá-lo e adicionar funcionalidades, como excluir linhas, etc...

 

Um site muito útil para comecar a estudar é o da W3C.

 

<html>	   <head>		   <title>Exemplo de tabela dinamica</title>		   <script>		   			   var inIndex = 0;			   			   function setIndex(pNumero){				   inIndex = pNumero;			   }			   			   function fcnAddLinha(pParent){				   				   var tblTarget				   var tblRow				   var tblCol1				   var tblCol2				   var tblCol3				   var tblCol4				   var tblCol5				   				   inIndex++;				   setIndex(inIndex);				   				   tblTarget = document.getElementById(pParent);				   tblRow = tblTarget.insertRow(-1); // o -1 é para inserir apos a ultima linha				   // tblRow.className = "suaclasse"; // AQUI VOCE SETA A CLASS CSS DA 'LINHA'				   				   tblCol1 = tblRow.insertCell(0);				   tblCol1.innerHTML = "<input type='Text' name='TxInicio" + inIndex + "' id='TxInicio" + inIndex + "' value='Inicio: " + inIndex + "'>";				   				   tblCol2 = tblRow.insertCell(1);				   tblCol2.innerHTML = "<input type='Text' name='TxTermino" + inIndex + "' id='TxTermino" + inIndex + "' value='Termino: " + inIndex + "'>";				   				   tblCol3 = tblRow.insertCell(2);				   tblCol3.innerHTML = "<input type='Text' name='TxPeriodo" + inIndex + "' id='TxPeriodo" + inIndex + "' value='Periodo: " + inIndex + "'>";				   				   tblCol4 = tblRow.insertCell(3);				   tblCol4.innerHTML = "<input type='Text' name='TxVagas" + inIndex + "' id='TxVagas" + inIndex + "' value='Vagas: " + inIndex + "'>";				   				   tblCol5 = tblRow.insertCell(4);				   tblCol5.innerHTML = "<input type='Text' name='TxUnidade" + inIndex + "' id='TxUnidade" + inIndex + "' value='Unidade: " + inIndex + "'>";			   			   }			   		   </script>		   	   </head>	   	   <body>	   	   <table>		   <tr>			   <td>				   <form name="frmExemplo" id="frmExemplo" method="post" action="pagePost.asp">					   <table id="tblDinamica">						   <tr>							   <td> Inicio </td>							   <td> Término </td>							   <td> Período </td>							   <td> Vagas </td>							   <td> Unidade </td>						   </tr>					   </table>				   </form>			   </td>		   </tr>		   <tr>			   <td align="left">				   <table>					   <td><input type="button" name="cmdAddLinha" id="cmdAddLinha" value="Inserir Linha" onClick="java script:fcnAddLinha('tblDinamica');"></td>					   <td><input type="submit" name="cmdEnvia" id="cmdEnvia" value="Enviar"></td>				   </table>			   </td>		   </tr>	   </table>	   	   </body>	   </html>

o código acima cria uma tabela simples com os campos desejados e a cada clique no botão 'Inserir Linha', uma nova linha é adicionada à tabela.

 

 

OBS: Não sei porque, mas no evento onClick do botao 'Inserir Linha', a palavra 'javascript' sempre sai separada: 'java script'. já editei umas 8 vezes e não adianta, não muda... hauehaue.. Portanto, na hora de testarem o script, arrumem ali... blza!

 

 

espero que o exemplo ajude. falow!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Schneider    0

Schneider
Postado

Conseguiu?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Je. Ferreira    0

Je. Ferreira
Postado

OBS: Não sei porque, mas no evento onClick do botao 'Inserir Linha', a palavra 'javascript' sempre sai separada: 'java script'. já editei umas 8 vezes e não adianta, não muda... hauehaue.. Portanto, na hora de testarem o script, arrumem ali... blza!

 

Não é necessário usar 'javascript' para chamar função use funcao(); ao invés de javascript:funcao(); no botão.

Compartilhar este post

Link para o post
Compartilhar em outros sites

xanburzum    169

xanburzum
Postado

você também pode criar uma tabela diâmica usando o FSO, mas trabalhando com AJAX, fica mais interativo

ja em js , olha este exemplo:

 

var d = document ;
        window.onload = function(){
                d.getElementById( 'firstLink' ).onclick = function(){ removerTr( 1 ) }
        
                d.getElementById( 'add' ).onclick = function(){
                        var oTable = d.getElementById( 'tabela' ) ;
                        var newTr  = oTable.insertRow( -1 ) ;
                        
                        newTr.setAttribute( 'id' , 'row' + oTable.rows.length ) ;
                        newTr.insertCell(0).appendChild( getLinkExcluir( oTable.rows.length ) ) ;
                        newTr.insertCell(1).appendChild( getInput() ) ;
                }
        }
        
        function getLinkExcluir( rowId )
        {
                var oA = d.createElement( 'a' ) ;
                oA.setAttribute( 'href' , '#' ) ;
                oA.innerHTML =  'excluir' ;
                oA.onclick = function(){ removerTr( rowId ) ; }
                return oA ;
        }
        
        function getInput()
        {
                var oInput = d.createElement( 'input' ) ;
                oInput.setAttribute( 'name' , 'inputs[]' ) ;
                return oInput ;
        }
        
        function removerTr( rowId )
        {
                var iRow = d.getElementById( 'row' + rowId ).rowIndex ;
                d.getElementById( 'tabela' ).deleteRow( iRow ) ;
                return false ;
        }

e o html assim:

 

<form>
                <table id='tabela'>
                  <tr id='row1'>
                        <td><a id='firstLink' href='#'>excluir</a></td>
                         <td>
                                <input type="text" name='inputs[]'>
                         </td>
                  </tr>
                </table>

                <div><input type="submit"></div>
        </form>
        <button id='add' type='button'>Adicionar</button>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Mário Monteiro    179

Mário Monteiro
Postado

Olá Je. Ferreira ,

 

Obrigado por compartilhar seu conhecimento conosco.

 

Continue contribuindo respondendo os tópicos mais recentes.

 

Abraços

 

Mário Monteiro

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos ASP Clássico
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito