tyago
Janeiro 27, 2013, 2:14am
#1
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>yyyyyyy@hotmail.com</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>
pitiko
Janeiro 28, 2013, 12:07pm
#2
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">yyyyyyy@hotmail.com</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>
tyago
Janeiro 28, 2013, 4:19pm
#3
tyago
Janeiro 31, 2013, 4:16pm
#4
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
pitiko
Janeiro 31, 2013, 4:57pm
#5
Qual o erro que está aparecendo?
Você está testando em qual versão do IE? Eu testei na versão 8 e está funcionando.
tyago
Janeiro 31, 2013, 7:15pm
#6
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
pitiko
Fevereiro 1, 2013, 10:12am
#7
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 = "";
}