2

Estou criando uma pagina de cadastro onde obrigatoriamente só posso fazer uso de HTML, jquery e css. Assim que cadastrado, as informaçoes devem constar em uma tabela abaixo e desta tabela, os dados devem poder ser alterados Porem, estou com dificuldades na função para alterar os dados dos registros, sempre que insiro um registro na tabela, o anterior da da bug na alteação e envia códigos HTML. estou colocando o código aqui e agradeço desde já qualquer ajuda.

$(document).ready(function(){


  $("input.CEP").mask("99.999-999"); 
  $("input.DN").mask("99/99/9999");


  $('#cancelar').on('click', function(){
    $('#nome').val('');
    $('#DN').val('');	
    $('#email').val('');
    $('#CEP').val('');


  });
  $('#registrar').on('click', function(){

    var nomeVal = form1.nome.value;
    var emailVal = form1.email.value;
    var ddnVal = form1.DN.value;
    var cepVal = form1.CEP.value;

    var testCad = 0;

    console.log(nomeVal);



    if(nomeVal != "" && ddnVal != "" && emailVal != "" && cepVal != ""){



      var filtro = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;

      if(filtro.test(emailVal))
      {


        $('#tabCrud').append('<tr"><td>'+ nomeVal +'</td> <td>'+ emailVal +'</td><td>'+ ddnVal +'</td><td>'+ cepVal +'</td> <td><input type="button" class="AltBut" value="Alterar"/></td> <td><input type="button" class="salBut" value="Salvar"/></td><td><input type="button" class="ExBut" value="Excluir"/></td></tr>');

        $('#nome').val('');
        $('#DN').val('');	
        $('#email').val('');
        $('#CEP').val('');

        //$('.salBut').hide();


        $(".AltBut").bind("click", Editar);  
        $(".salBut").bind("click", FunSal);
        $(".ExBut").bind("click", Excluir);


        return true;


      } else {
        alert("Este endereço de email não é válido!");
        document.form1.email.focus();
        return false;
      }



    }else{

      alert("Todos os campos são obrigatorios");
    }



  });	



  function Editar(){

    var par = $(this).parent().parent(); //tr
    var tdNome = par.children("td:nth-child(1)");
    var tdEmail = par.children("td:nth-child(2)");
    var tdDN = par.children("td:nth-child(3)");
    var tdCEP = par.children("td:nth-child(4)");




    tdNome.html("<input type ='text' value='"+tdNome.html()+"'/td>");
    tdEmail.html("<input type='text' id='txtEmail' value='"+tdEmail.html()+"'/>");
    tdDN.html("<input type='text'id='txtDN' value='"+tdDN.html()+"'/>");
    tdCEP.html("<input type='text'id='txtDN' value='"+tdCEP.html()+"'/>");


    //$('.salBut').show()

  }


  function FunSal(){
    var par = $(this).parent().parent(); //tr
    var tdNome = par.children("td:nth-child(1)");
    var tdDN = par.children("td:nth-child(2)");
    var tdEmail = par.children("td:nth-child(3)");
    var tdCEP = par.children("td:nth-child(4)");

    tdNome.html(tdNome.children("input[type=text]").val());
    tdDN.html(tdDN.children("input[type=text]").val());
    tdEmail.html(tdEmail.children("input[type=text]").val());
    tdCEP.html(tdCEP.children("input[type=text]").val());
    //$('.AltBut').show();
    //$('.salBut').hide();


  };


  function Excluir(){
    var par = $(this).parent().parent();
    //$('.AltBut').show() //tr
    par.remove();
  };
});
body {background-color: #FFE4B5;}
table.bordasimples {border-collapse: collapse;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://files.rafaelwendel.com/jquery.js"></script>
<script type="text/javascript" src="http://files.rafaelwendel.com/jquery.maskedinput.js"></script>
<form name="form1" action="#" method="post">
  <table boder = '1px' align=center  >
    <caption>CADASTRO</caption>
    <tr>
      <td><label for ="nome">*Nome: </label></td>
      <td><input id="nome" type="text" name = "nome"></td>
      <td><label id="labelNome"></label> </td>
    </tr>
    <tr>
      <td><label for ="Email">*Email: </label></td>
      <td><input type="text" id="email" name = "email"></td>
    </tr>
    <tr>
      <td><label for ="Data de Nascimento">*Data de Nascimento: </label></td>
      <td><input type="text" class="DN" id="DN" name = "DN"></td>
    </tr>
    <tr>
    </tr>
    <tr>
      <td><label for ="CEP">*CEP: </label></td>
      <td><input type="text" id="CEP" class="CEP" name = "CEP"></td>
    </tr>
    <tr>
      <td colspan="2">
        <!--<input type="submit" id="cadastrar" onclick="validar()">-->
        <input type="button" name="registrar" id="registrar" value="registrar">
        <input type="button" name="Cancelar" id="cancelar" value="Cancelar">
      </td>
    </tr>
  </table>
</form>
<div >
  <table id="tabCrud" border ="1px" align=center bordercolor = " #8B8682  " class="bordasimples" bgcolor =" #D2B48C">
    <tr>
      <td>Nome</td>
      <td>e-mail</td>
      <td>Data Nascimento</td>
      <td>CEP</td>
    </tr>
  </table>
</div>

4
  • ta faltando fechar a tag TD e o input nessa linha > tdNome.html("<input type ='text' value='"+tdNome.html()+"'/td>"); Commented 18/09/2015 às 19:47
  • 1
    alguns exemplos que podem lhe ajudar jquery-bootgrid.com/Examples Commented 18/09/2015 às 20:06
  • @JoseVieiraNeto eu corrigi esses erros e mesmo assim continua a enviar códigos HTML para a input de alteração
    – jgmnhp
    Commented 21/09/2015 às 18:30
  • @jgmnhp dá uma olhada na resposta que publiquei Commented 22/09/2015 às 11:52

2 Respostas 2

1

Primeiro, o método .bind('evento', callback) está decrecated, utilize o .on('evento', callback).

Segundo ponto, como não está definindo um escopo para o seu seletor, toda vez que faz um $("<seletor>").bind('evento', callback); você está adionando um novo EventListener aos elementos retornados por este seletor, então ao adicionar 3 linhas, a primeira linha vai possuir 3 EventListener duplicados associados ao mesmo evento.

uma forma de corrigir isto, é atribuir um escopo ao seu seletor, um candidato otimo no seu caso é a tr à que os inputs pertencem... então ao invés de fazer:

$(".AltBut").bind("click", Editar);  
$(".salBut").bind("click", FunSal);
$(".ExBut").bind("click", Excluir);

faça da seguinte forma:

var linha = $('<tr><td>'+ nomeVal +'</td> <td>'+ emailVal +'</td><td>'+ ddnVal +'</td><td>'+ cepVal +'</td> <td><input type="button" class="AltBut" value="Alterar"/></td> <td><input type="button" class="salBut" value="Salvar"/></td><td><input type="button" class="ExBut" value="Excluir"/></td></tr>');

$(".AltBut", linha).on("click", Editar);  
$(".salBut", linha).on("click", FunSal);
$(".ExBut", linha).on("click", Excluir);

$("#tabCrud").append(linha);

a solução que eu usuario, seria fazer o bind destes eventos já ao carregar a paginar, usando uma sobrecarga do .on com 3 argumentos $('<tabela>').on('evento', '<seletor>', callback), então ficaria desta forma:

$(function () {

    /* demais codigo aqui */
    function Editar() { /* demais codigo aqui */ };
    function FunSal() { /* demais codigo aqui */ };
    function Excluir() { /* demais codigo aqui */ };
    /* demais codigo aqui */

    $("#tabCrud").on("click", ".AltBut", Editar);  
    $("#tabCrud").on("click", ".salBut", FunSal);
    $("#tabCrud").on("click", ".ExBut", Excluir);
});

esta forma, os novos elementos que serão adicionados a pagina já receberam os eventos associados.

e algumas dica para melhorar o seu codigo, evite ficar repetindo os seus seletores, faça eles apenas uma vez, armazene em uma variavel e passe a utilizar esta variavel... então no lugar de fazer assim:

$("input.CEP").mask("99.999-999"); 
$("input.DN").mask("99/99/9999");

$('#cancelar').on('click', function(){
    $('#nome').val('');
    $('#DN').val('');   
    $('#email').val('');
    $('#CEP').val('');
});

faça da seguinte forma:

var input = {};
input.CEP = $("input.CEP");
input.DN= $("input.CEP");

var cancelar = $("#cancelar");
var nome= $("#nome");
var DN= $("#DN");
var email= $("#email");
var CEP= $("#CEP");

input.CEP.mask("99.999-999"); 
input.DN.mask("99/99/9999");

cancelar.on('click', function(){
    nome.val('');
    DN.val(''); 
    email.val('');
    CEP.val('');
});

e por fim, ID deve ser unico, então ao criar um elemento de forma dinamica, evite atribuir um id estatico à ele, então faça uso de um contador, ou melhor, substitua o id por name.

tdNome.html("<input type ='text' name='txtNome' value='"+tdNome.html()+"'/td>");
tdEmail.html("<input type='text' name='txtEmail' value='"+tdEmail.html()+"'/>");
tdDN.html("<input type='text' name='txtDN' value='"+tdDN.html()+"'/>");
tdCEP.html("<input type='text' name='txtDN' value='"+tdCEP.html()+"'/>");
0

Substitua sua função editar por essa

    function Editar(){

       var par = $(this).parent().parent(); //tr
       var tdNome = par.children("td:nth-child(1)");
       var tdEmail = par.children("td:nth-child(2)");
       var tdDN = par.children("td:nth-child(3)");
       var tdCEP = par.children("td:nth-child(4)");

       tdNome.html("<input type ='text' value='"+tdNome.val()+"'</td>");
       tdEmail.html("<input type='text' id='txtEmail' value='"+tdEmail.val()+"'/>");
       tdDN.html("<input type='text'id='txtDN' value='"+tdDN.val()+"'/>");
       tdCEP.html("<input type='text'id='txtDN' value='"+tdCEP.val()+"'/>");

 }

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .