Pegar dados de uma tabela e enviar para um formulario pare que possa ser deletado ou alterado

6 respostas
T

Ola pessoal to com uma duvida, eu tenho uma tabela com cada linha com um checkbox e queria que na hora que marcasse esse checkbox (referente a linha que ele esta marcando) gostaria que os dados fossem enviados para os respectivos inputs para que me possibilite editar os dados ou apagar a linha. deu pra entender vou mostrar o codigo.

<table cellspacing="0" summary="Tabela de dados de uma agenda" id="ordersTable">
					  <thead>
						<tr>
						  <th><input type="checkbox" value="1" id="marcar-todos" name="marcar-todos" /></th>
						  <th width="20">ID</th>
						  <th width="250">Nome</th>
						  <th width="100">Telefone</th>
						  <th width="200">Email</th>
						  <th width="90">Referencia</th>
						</tr>
					  </thead>
				  
					  <tbody>
						<tr>
						  <td><input type="checkbox" value="1" name="marcar[]" /></td>
						   <td>1</td>
						  <td>Tyago</td>
						  <td>xxxxxxxx</td>
						  <td>xxxxxxxhotmail.com</td>
						  <td>tyago trabalho</td>
						</tr>
						<tr>
						  <td><input type="checkbox" value="1" name="marcar[]" /></td>
						  <td>2</td>
						  <td>Rodrigo</td>
						  <td>yyyyyyyy</td>
						  <td>[email removido]</td>
						  <td>rodrigo escola</td>
						</tr>
		  
					  </tbody>
                </table>

                  <form action="acao.php" method="post">
			<input type="text" name="nome" placeholder="Nome"/>
			<input type="text" name="numero_cel" placeholder="Celular" />
			<input type="text" name="numero_casa" placeholder="Casa ou Trabalho" />
			<input type="email" name="email" placeholder="Email" />
			<input type="submit" name="cadastrar" value="Cadastrar"/>
			<input type="submit" name="atualizar" value="Atualizar"/>
			<input type="submit" name="remover" value="Remover"/>
		</form>

6 Respostas

P

Ficaria algo assim:

<script>
var linha;
function deletar() {
	var myTD=document.getElementById('ordersTable').getElementsByTagName('tr')[linha];
	myTD.parentNode.removeChild(myTD);
}

function selecionar(name) {
	linha = document.forms["form"].elements[name].value;
	var status = document.forms["form"].elements[name].checked;
	popularInputs(linha , status);
}

function popularInputs(td, status) {
	if (status === false) {
		limpeza();
	} else {
		document.forms["form"].elements["nome"].value = document.getElementById("tNome"+td).innerHTML;
		document.forms["form"].elements["numero_cel"].value = document.getElementById("tTelefone"+td).innerHTML;
		document.forms["form"].elements["email"].value = document.getElementById("tEmail"+td).innerHTML;
	}
}

function limpeza() {
	document.forms["form"].elements["nome"].value = "";
	document.forms["form"].elements["numero_cel"].value = "";
	document.forms["form"].elements["email"].value = "";
}
</script>
<form name="form" action="acao.php" method="post">
<table cellspacing="0" summary="Tabela de dados de uma agenda" id="ordersTable"> 
<thead> 
<tr> 
<th><input type="checkbox" value="0" id="marcar-todos" name="marcar-todos" /></th> 
<th width="20">ID</th> 
<th width="250">Nome</th> 
<th width="100">Telefone</th> 
<th width="200">Email</th> 
<th width="90">Referencia</th> 
</tr> 
</thead> 

<tbody> 
<tr> 
<td><input type="checkbox" value="1" name="marcar0" onclick="return selecionar(this.name);" /></td> 
<td>1</td> 
<td id="tNome1">Tyago</td> 
<td id="tTelefone1">xxxxxxxx</td> 
<td id="tEmail1">xxxxxxxhotmail.com</td> 
<td>tyago trabalho</td> 
</tr> 
<tr> 
<td><input type="checkbox" value="2" name="marcar" onclick="return selecionar(this.name);" /></td> 
<td>2</td> 
<td id="tNome2">Rodrigo</td> 
<td id="tTelefone2">yyyyyyyy</td> 
<td id="tEmail2">[email removido]</td> 
<td>rodrigo escola</td> 
</tr> 

</tbody> 
</table> 

<input type="text" name="nome" placeholder="Nome"/> 
<input type="text" name="numero_cel" placeholder="Celular" /> 
<input type="text" name="numero_casa" placeholder="Casa ou Trabalho" /> 
<input type="email" name="email" placeholder="Email" /> 
<input type="submit" name="cadastrar" value="Cadastrar"/> 
<input type="submit" name="atualizar" value="Atualizar"/> 
<input type="button" name="remover" value="Remover" onclick="return deletar();" />
</form>
T

pitiko MUIIIIIIIIIITO OBRIGADO DEU CERTINHO vllwww mesmo cara 0// :smiley: :smiley: :smiley: :smiley: :smiley: :smiley: :smiley: :smiley: :smiley: :smiley:

T

Boa tarde Pitiko, cara eu tava testando no Chrome e tava tudo de boa ai fui testar no Firefox e no IE, e neles o forulario na ta recebendo os dados vindos da tabela, tentei resolver mas nao consegui vc sabe o que ta acontecendo? agradeço

P

Qual o erro que está aparecendo?

Você está testando em qual versão do IE? Eu testei na versão 8 e está funcionando.

T

ele nao pega os valores vindos da tabela, fica tudo vazio no formulario mesmo quando clico no chekbox, mas queria que pelo menos pegasse tmbm no firefox

P

Tenta dessa maneira:

function popularInputs(td, status) {  
    if (status === false) {  
        limpeza();  
    } else {  
        document.getElementById("nome").value = document.getElementById("tNome"+td).innerHTML;  
        document.getElementById("numero_cel").value = document.getElementById("tTelefone"+td).innerHTML;  
        document.getElementById("email").value = document.getElementById("tEmail"+td).innerHTML;  
    }  
}  
  
function limpeza() {  
    document.getElementById("nome").value = "";  
    document.getElementById("numero_cel").value = "";  
    document.getElementById("email").value = "";  
}
Criado 27 de janeiro de 2013
Ultima resposta 1 de fev. de 2013
Respostas 6
Participantes 2