Manipulação de tabelas

[bento]

Boa Noite galera preciso de uma ajuda de vocês tenho que fazer o seguinte:

após a pessoa fazer seu cadastro e clicar no botão editar as informações da pessoa tem que voltar para os campos e caso ela queira mudar algo tenha que clicar em cadastrar e aquela row que tinha os dados dela seja deletado e criado outra no respectivo lugar o meu codigo segue abaixo obrigado.

<title>Cadastro  de Contatos</title>
    <script language="javascript">
     var varEditar = false;
     var linha = 0;


    function validaForm(){
        validar=document.cadastro;
        if(validar.nome.value==""){
            alert("O campo " + validar.nome.id + " deve ser preenchido!");
            document.cadastro.nome.focus();
            return false;
        }
        if(validar.email.value==""){
            alert("O campo " + validar.email.id + " deve ser preenchido!");
            document.cadastro.email.focus();
            return false;
        }
        if(validar.datanascimento.value==""){
            alert("O campo " + validar.datanascimento.id + " deve ser preenchido!");  
            document.cadastro.datanascimento.focus();
            return false;
        }
        if(validar.CPF.value==""){
            alert("O campo " + validar.CPF.id + " deve ser preenchido!");
            document.cadastro.CPF.focus();
            return false;
        }
        if(validar.cidade.value==""){
            alert("O campo " + validar.cidade.id + " deve ser preenchido!");
            document.cadastro.cidade.focus();
            return false;
        }
        if(validar.estado.value==""){
            alert("O campo " + validar.estado.id + " deve ser preenchido!");
            document.cadastro.estado.focus();
            return false;
        }
        if(validar.endereco.value==""){
            alert("O campo " + validar.endereco.id + " deve ser preenchido!");
            document.cadastro.endereco.focus();
            return false;
        }
        TabelaCadastro();
        return true;
    }
    

        
        function Editar(){

              if (!document.getElementsByTagName || !document.createTextNode) return;
                 var rows = document.getElementById('tabela').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
                    for (i = 0; i < rows.length; i++) {
                        rows[i].onclick = function() {
                        linha.value=rows[i];
                        }
                    }
                   
            var varnome=document.getElementById('tabela').rows[linha].cells[1].innerHTML;
            var nomeAux=document.getElementById('nome');
            var varemail=document.getElementById('tabela').rows[linha].cells[2].innerHTML;
            var emailAux=document.getElementById('email');
            var vardatanascimento=document.getElementById('tabela').rows[linha].cells[3].innerHTML;
            var dataNascimentoAux=document.getElementById('datanascimento');
            var varCPF=document.getElementById('tabela').rows[linha].cells[4].innerHTML;
            var CPFAux=document.getElementById('CPF');
            var varcidade=document.getElementById('tabela').rows[linha].cells[5].innerHTML;
            var cidadeAux=document.getElementById('cidade');
            var varestado=document.getElementById('tabela').rows[linha].cells[6].innerHTML;
            var estadoAux=document.getElementById('estado');
            var varendereco=document.getElementById('tabela').rows[linha].cells[7].innerHTML;
            var enderecoAux=document.getElementById('endereco');
            nomeAux.value=varnome;   
            emailAux.value=varemail;
            dataNascimentoAux.value=vardatanascimento;
            CPFAux.value=varCPF;
            cidadeAux.value=varcidade;
            estadoAux.value=varestado;
            enderecoAux.value=varendereco;

            varEditar = true;
        }
        
        function deletar(i){          
            
            document.getElementById('tabela').deleteRow(i);
            
        }

        function TabelaCadastro(){
            
            if(varEditar== true){
                 deletar();
                 varEditar=false;
            }
            if(varEditar== false){
                linha=linha+1;
            }

                
                            
            
            
            
            //Criando uma nova linha na tabela
            var novaLinha = document.getElementById('tabela').insertRow(-1);
            
            
      


                    //Criando as colunas
            var coluna1 = novaLinha.insertCell(0);
            var coluna2 = novaLinha.insertCell(1);
            var coluna3 = novaLinha.insertCell(2);
            var coluna4 = novaLinha.insertCell(3);
            var coluna5 = novaLinha.insertCell(4);
            var coluna6 = novaLinha.insertCell(5);
            var coluna7 = novaLinha.insertCell(6);
            var coluna8 = novaLinha.insertCell(7);
            
            //Criando Botao.
            var varbotao1= document.createElement("<input type='button' value='Editar' onclick='Editar(linha);' />");
            var varbotao2 = document.createElement("<input type='button' value='Excluir' id='delete' onclick='deletar(linha)'/>");
            coluna1.appendChild(varbotao1);
            coluna1.appendChild(varbotao2);

            
            //Recebendo os valores
            var varnome=document.getElementById('nome');
            var varemail=document.getElementById('email');
            var vardtNascimento=document.getElementById('datanascimento');
            var varCPF=document.getElementById('CPF');
            var varcidade=document.getElementById('cidade');
            var varestado=document.getElementById('estado');
            var varendereco=document.getElementById('endereco');
            //Passando os valores para a tabela.
            coluna2.innerHTML=varnome.value;
            coluna3.innerHTML=varemail.value;
            coluna4.innerHTML=vardtNascimento.value;
            coluna5.innerHTML=varCPF.value;
            coluna6.innerHTML=varcidade.value;
            coluna7.innerHTML=varestado.value;
            coluna8.innerHTML=varendereco.value;
                       
        }



    </script>
</head>
<body>
    <form name="cadastro" method="post"  />
        <p><img src="Desert.jpg" height="75" width="100" /><b>Cadastro de Contas</b></p>
        <p><b>Nome<font color="red">*</font>:</b><input type="text" size="50" id="nome" /></p>
        <p><b>Email<font color="red">*</font>: </b><input type="text" size="50" id="email" /></p>
        <p><b>Data de Nascimento<font color="red">*</font>: </b><input type="text" size="15" id="datanascimento" /><b>(dd/mm/aaaa)</b></p>
        <p><b>CPF<font color="red">*</font>: </b><input type="text" size="15" id="CPF" /><b>(xxx.xxx.xxx-xx)</b></p>
        <p><b>Cidade: </b><input type="text" size="50" id="cidade" />
        </p><b>Estado: </b>
            <select id="estado">
                <option value=""></option>
                <option value="SC">SC</option>
                <option value="SC">PR</option>
                <option value="SC">RS</option>
            </select>
        <p><b>Endereço:</b><textarea id="endereco"  rows="5" cols="40"></textarea></p>
        <input type="button"  value="Cadastrar" onclick='validaForm()' id="cadastrar"/>
        <input id="Limpar1" type="reset" value="Limpar" />
    </form>
   
    
        <table border="1" id="tabela"> 
            <tr> 
                <td>Ações</td>
                <td>Nome</td> 
                <td>Email</td>
                <td>Data de Nascimento</td>
                <td>CPF</td>
                <td>Cidade</td>
                <td>Estado</td>
                <td>Endereço</td> 
            </tr> 
        </table> 
   



</body>
</html>

[.Andreia.]

se eu entendi, você tem uma pagina que é usada para cadastro e edicao... isso?

Porque você não faz isso com uma linguagem tipo ASP, PHP, muito mais simples.. voce já está usando alguma?

[bento]

tambem tinha pensando nisso, mas preciso fazer em html

[Romerito]

i aew bento, então peguei o seu script e fiz umas pequenas modificações, testa aew pra ver se vai:

var varEditar = 0;
    var d           = document;
    var idLinha   = 1;

    function validaForm(){
        var oElems = d.cadastro.elements;
        
        for ( var i = 0; i < ( oElems.length - 2 ); i++ )
        {
            if ( oElems[i].value == "" )
            {
                alert( "O campo " + oElems[i].id + " deve ser preenchido!" );
                oElems[i].focus();
                return false;
            }
        }
        
        TabelaCadastro();
        return true;
    }

    function TabelaCadastro(){
        if ( varEditar )
        {
            deletar( varEditar );
            varEditar = 0;
        }
        var oTable      = d.getElementById( 'tabela' );
        var varbotao1 = d.createElement( 'input' );
        varbotao1.setAttribute( 'type'  , 'button' );
        varbotao1.setAttribute( 'value' , 'Editar' );
        var iCnt = idLinha++; 
        varbotao1.onclick = function(){ editar( iCnt ) };
        var varbotao2 = d.createElement( 'input'  );
        varbotao2.setAttribute( 'type'    , 'button'  );
        varbotao2.setAttribute( 'value' , 'Excluir' );
        varbotao2.onclick = function(){ deletar( iCnt ) };
        
        var oDiv = d.createElement( 'div' );
        oDiv.appendChild( varbotao1 );
        oDiv.appendChild( varbotao2 );
        
        var novaLinha = oTable.insertRow( -1 );
        novaLinha.setAttribute( 'id' , 'row' + iCnt );

        novaLinha.insertCell(0).appendChild( oDiv );
        
        var oFrm = d.cadastro;
    
        for ( var i = 0; i < ( oFrm.elements.length - 2 ); i++ )
            novaLinha.insertCell( i + 1 ).innerHTML = oFrm.elements[i].value;
        
    }
    
    function deletar( idRow )
    {
        var iRow = d.getElementById( 'row' + idRow ).rowIndex;
        d.getElementById( 'tabela' ).deleteRow( iRow );
    }
    
    function editar( idRow )
    {
        var oElems = d.cadastro.elements;
        var oTable = d.getElementById( 'tabela' );
        var iRow   = d.getElementById( 'row' + idRow ).rowIndex;
        var oTr       = oTable.rows[ iRow ];
        var oTds   = oTr.cells;
        for ( var i = 1 , j = 0; i < oTds.length; i++ , j++ )
        {
            oElems[j].value = oTds[i].innerHTML;
            varEditar = iRow;
        }
    }

qualquer coisa posta aew, abraço!

[bento]

o romerito vlw obrigado, fiz mais algumas mudanças mas foi uma mão na roda

obrigado mesmo

vlw

preciso de outra ajuda, o professor passou mais um pra fazer e eu não entendo nada de javascript

preciso inserir na tabela os numeros que eu digitar no campo text e quando clica no botao ">>" tem que ir para outro tabela todos os itens selecionados o mesmo caso o botao "<<" oara voltar os itens selecionados, e o botao ">" sow para ir um e o remover para deletar os itens selecionados.

desde já obrigado!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Lista</title>
    
    <script language="javascript">
       
        function InserirLista1(){
            
            var varText=document.getElementById('texto').value;
            var NovaOpcao = document.createElement('<option value="">');
            document.all.Lista1.options.add(NovaOpcao);
            NovaOpcao.innerText = varText;
        }
        
        function InserirLista2(){

           
        }
        
        function RemoverLista(){
        
            
        }
    </script>
</head>
<body>
    <p>Text:<input type="text" id="texto" /></p>
    <p><input type="button" id="Inserir" value="Inserir" onclick="InserirLista1();"/></p>
    <p><select multiple="multiple" id="Lista1"/></p>

    <input type="button" id="<<" value="<<"/>
    <input type="button" id="<" value="<" />
    <input type="button" id=">" value=">" onclick="InserirLista2(this.selectedIndex);" />
    <input type="button" id=">>" value=">>"/>
    <select multiple="multiple" id="Lista2"/>
    <p><input type="button" id="Remover" value="Remover" onclick="RemoverLista();"/></p>

</body>
</html>