Ir para conteúdo

POWERED BY:

Arquivado

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

Adilson_Web_2007

trocar um campo imput para uma linha da tabela

Por , em Javascript

Recommended Posts

Adilson_Web_2007    0

Adilson_Web_2007
Postado

Olá pessoal eu estou presquisando e não achei como fazer para trocar um campo do tipo imput type para uma linha da tabela.

 

Eu tenho uma tabela com informações quem vem do BD para não ter que montar o formulário para atualizar tudo, com a ajuda do pessoal do forum eu fiz um script que quando clica na linha da tabela ela vira um imput type com a informação dentro, ate aqui tudo funciomando perfeitamente. Qaundo eu clico no botão atualizar ele atualiza a informação, só que eu quero que volte a ser a linha da tabela , mas ele fica no imput quem puder me ajudar eu agradeço.

Preciso criar uma função para trocar de imput para a linha da tabela como era.

Compartilhar este post

Link para o post
Compartilhar em outros sites

andreia_sp    1

andreia_sp
Postado
Bom seria ate mais facil se você postasse o script ou o link pra vermos... mas pelo que você está falando, crie uma linha usando createElement

Compartilhar este post

Link para o post
Compartilhar em outros sites

berkowitz    2

berkowitz
Postado

tenta fazer o inverso do script que transforma em INPUT quando você mandar salvar...

Compartilhar este post

Link para o post
Compartilhar em outros sites

msantino    0

msantino
Postado

eu to com esse mesmo problema Adilson_Web_2007...

 

também fiz a função que transforma uma linha da tabela em campo text, edito o valor no campo mas não to conseguindo fazer voltar com o valor editado para a linha da tabela...

 

se você conseguir resolver posta o script, pois to meio enrascado...

 

vlw

Compartilhar este post

Link para o post
Compartilhar em outros sites

Adilson_Web_2007    0

Adilson_Web_2007
Postado

Eu consegui vou postar todo o codigo se for a melhor maneira beleza

 

1 ° eu tenho uma tabela com varios dados que vem do banco de dados como abaixo

 

Obs coloquei so uma para exemplo.

 

<td  bgcolor="#D6EBFF"><div align="right">Contratante</div></td>
<td bgcolor="#DEDFDE" colspan="2" onclick="mostraCampo(this,'contratante','INFORMACAO')" id="INFORMACAO"><%=destacaAlterado(rsTabela("contratante"))%></td>

Nesse código eu estou passando para a função mostraCampo nome do cmpo do banco de dados e o id para trocar a informação.

 

2º função mostraCampo

 

<script>
function mostraCampo(obj,valor,local){

	if(obj.getElementsByTagName("input").length == 0){
		
		var newInput = document.createElement("input");
		newInput.type = "text";
		newInput.id = "texto";	
		newInput.value = obj.innerHTML;
		newInput.size = "40"; 
		var btAtualizar = document.createElement("input");
		btAtualizar.type = "button";
		btAtualizar.id = "btAtualizar";
		btAtualizar.value = "Atualizar";
		btAtualizar.onclick=function Chama(){
		 var valor_campo = valor;
		
		 var conteudo = document.getElementById("texto").value;
		 var codigo = document.getElementById("codigo").value;
		
		 getDados(conteudo,valor_campo,codigo,local);
		
		}
		var btLimpar = document.createElement("input");
		btLimpar.type = "button";
		btLimpar.id = "btLimpar";
		btLimpar.value = "Limpar";
		obj.innerHTML = "";
		obj.appendChild(newInput);
		obj.appendChild(btAtualizar);
	   // obj.appendChild(btLimpar);	
	}
}

</script>
essa função "troca" a linha da tabela pelo campo input type

 

3 ° no botão de atualizar eu coloquei uma função para pegar todos os valores necessarios para atualizar a informação.

 

dentro dessa função coloquei outra função getDados, é aqui onde tudo coneça, para atualizar o campo eu criei um script em AJAX.

 

Segue.

 

//atribuindo vazio para a variavel request

//------------------------------------------------------
var request = null;
try
{
	/* cria uma variável de solicitação para navegadores que não seja IE*/
	request = new XMLHttpRequest();
}
	catch(trymicrosoft)
	{  
		 try
		 {
			/* cria uma variável de solicitação para a maioria das versões do IE*/
		   request = new ActiveXObject("Msxm12.XMLHTTP"); 
		 }
			catch(othermicrosoft)
			 {
				  try
				  {
					 /* Para algumas versões é necessario utilizar esse objeto aqui.*/
					 request = new ActiveXObject("Microsoft.XMLHTTP");
				  }
					  catch(failed)
					  {
						/* caso nenhum objeto seja criado a variável request recebe null*/
						request = null;
					  }
			 }
	}
		 //--------------------------------------------------------------------
		 if(request == null)
		 {
			alert("Erro ao criar um objeto de solicitação!");
		 }
		//---------------------------- 
	
function updatePage(local)
{
	if(request.readyState == 4)
	{
	   if(request.status==200)
	   {
		  /* captura a resposta do servidor e coloca na variável resposta*/
		   troca();  
	   }
	   else
		  {
			   alert("Erro! Request status is " + request.status + request.responseText);	
					 
		  }
	}
}   
var recebe="";
//-------------------fim function updatePage--------------------------------------------	
	function getDados(con,val,codigo,local){
		recebe = local;
		 var url = "trocaInfo.asp?conteudo=" + con +"&nome_campo="+ val + "&codigo="+codigo;
		 url = url + "&data=" + new Date().getTime();
		 request.open("get", url,true);
		 request.onreadystatechange =updatePage;
		 request.send(null);
		}
//------------------------------------------------------------------------

function troca(){
	document.getElementById(recebe).innerHTML = request.responseText;
	}

 

O script em AJAX é encarregado de atualizar e trocar a informação

Espero te ajudado .

 

Ha essa função troca que faz a troca dos valores pelos novos

Compartilhar este post

Link para o post
Compartilhar em outros sites

msantino    0

msantino
Postado

Muito obrigado Adilson, funcionou direitinho....

seu script foi de grande utilidade pro meu caso, salvou minha vida.... rsrsrs

 

vlw pela força e pelo post

 

t+

 

 

Eu consegui vou postar todo o codigo se for a melhor maneira beleza

 

1 ° eu tenho uma tabela com varios dados que vem do banco de dados como abaixo

 

Obs coloquei so uma para exemplo.

 

<td  bgcolor="#D6EBFF"><div align="right">Contratante</div></td>
<td bgcolor="#DEDFDE" colspan="2" onclick="mostraCampo(this,'contratante','INFORMACAO')" id="INFORMACAO"><%=destacaAlterado(rsTabela("contratante"))%></td>

Nesse código eu estou passando para a função mostraCampo nome do cmpo do banco de dados e o id para trocar a informação.

 

2º função mostraCampo

 

<script>
function mostraCampo(obj,valor,local){

	if(obj.getElementsByTagName("input").length == 0){
		
		var newInput = document.createElement("input");
		newInput.type = "text";
		newInput.id = "texto";	
		newInput.value = obj.innerHTML;
		newInput.size = "40"; 
		var btAtualizar = document.createElement("input");
		btAtualizar.type = "button";
		btAtualizar.id = "btAtualizar";
		btAtualizar.value = "Atualizar";
		btAtualizar.onclick=function Chama(){
		 var valor_campo = valor;
		
		 var conteudo = document.getElementById("texto").value;
		 var codigo = document.getElementById("codigo").value;
		
		 getDados(conteudo,valor_campo,codigo,local);
		
		}
		var btLimpar = document.createElement("input");
		btLimpar.type = "button";
		btLimpar.id = "btLimpar";
		btLimpar.value = "Limpar";
		obj.innerHTML = "";
		obj.appendChild(newInput);
		obj.appendChild(btAtualizar);
	   // obj.appendChild(btLimpar);	
	}
}

</script>
essa função "troca" a linha da tabela pelo campo input type

 

3 ° no botão de atualizar eu coloquei uma função para pegar todos os valores necessarios para atualizar a informação.

 

dentro dessa função coloquei outra função getDados, é aqui onde tudo coneça, para atualizar o campo eu criei um script em AJAX.

 

Segue.

 

//atribuindo vazio para a variavel request

//------------------------------------------------------
var request = null;
try
{
	/* cria uma variável de solicitação para navegadores que não seja IE*/
	request = new XMLHttpRequest();
}
	catch(trymicrosoft)
	{  
		 try
		 {
			/* cria uma variável de solicitação para a maioria das versões do IE*/
		   request = new ActiveXObject("Msxm12.XMLHTTP"); 
		 }
			catch(othermicrosoft)
			 {
				  try
				  {
					 /* Para algumas versões é necessario utilizar esse objeto aqui.*/
					 request = new ActiveXObject("Microsoft.XMLHTTP");
				  }
					  catch(failed)
					  {
						/* caso nenhum objeto seja criado a variável request recebe null*/
						request = null;
					  }
			 }
	}
		 //--------------------------------------------------------------------
		 if(request == null)
		 {
			alert("Erro ao criar um objeto de solicitação!");
		 }
		//---------------------------- 
	
function updatePage(local)
{
	if(request.readyState == 4)
	{
	   if(request.status==200)
	   {
		  /* captura a resposta do servidor e coloca na variável resposta*/
		   troca();  
	   }
	   else
		  {
			   alert("Erro! Request status is " + request.status + request.responseText);	
					 
		  }
	}
}   
var recebe="";
//-------------------fim function updatePage--------------------------------------------	
	function getDados(con,val,codigo,local){
		recebe = local;
		 var url = "trocaInfo.asp?conteudo=" + con +"&nome_campo="+ val + "&codigo="+codigo;
		 url = url + "&data=" + new Date().getTime();
		 request.open("get", url,true);
		 request.onreadystatechange =updatePage;
		 request.send(null);
		}
//------------------------------------------------------------------------

function troca(){
	document.getElementById(recebe).innerHTML = request.responseText;
	}

 

O script em AJAX é encarregado de atualizar e trocar a informação

Espero te ajudado .

 

Ha essa função troca que faz a troca dos valores pelos novos

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

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

  Aceito