<html>
            <head>
            <title>Teste Vue</title>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
            <!--adicionando css-->
            <link href="style.css" rel="stylesheet">
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
            <!-- Adicionando Javascript -->
            <script type="text/javascript" >
            // $('#').click(function(e) {
					
            //         $.getJSON("getFuncionario.php",{id: $('select#funcionario').val(), ajax: 'true'}, function(j){
                        
            //             linha = '<tr id="linhaFuncionario">';
            //             linha += '<td>'+ j[0].id + '</td>';
            //             linha += '<td>'+ j[0].nome + '</td>';
            //             linha += '<td>'+ j[0].email + '</td>';
            //             linha += '<td>';
            //             linha += '<input name="listFuncionarios[]" type="hidden" value="' + j[0].id + '">';
            //             linha += '<a id="delFuncionario" class="btn btn-danger"><i class="icon-trash icon-white"></i></a>';
            //             linha += '</td>';
            //             linha += '</tr>';
                     
            //             $('#funcionarioTable').append(linha);
            //             $("select#funcionario option[value='" + j[0].id + "']").remove();					     
            //         });
                
            // }); 
            // $('#excluir').live({
            //                 click: function(e){
            //                     linha = $(this).parent().parent();
            //                     rua = linha.children(':eq(0)').html();
            //                     bairro = linha.children(':eq(1)').html();
            //                     cidade = linha.children(':eq(2)').html();
            //                     uf = linha.children(':eq(3)').html();
            //                     $(this).parent().parent().remove();
            //                     option = '<option value="' + id + '" selected="selected" > ' + nome + ' </option>';
            //                     $('select#funcionario').prepend(option)
            //                 }                 
            //             });
            function limpa_formulário_cep() {
                    //Limpa valores do formulário de cep.
                    document.getElementById('rua').value=("");
                    document.getElementById('bairro').value=("");
                    document.getElementById('cidade').value=("");
                    document.getElementById('uf').value=("");
            }
        
            function meu_callback(conteudo) {
                if (!("erro" in conteudo)) {
                    //Atualiza os campos com os valores.
                    document.getElementById('rua').value=(conteudo.logradouro);
                    document.getElementById('bairro').value=(conteudo.bairro);
                    document.getElementById('cidade').value=(conteudo.localidade);
                    document.getElementById('uf').value=(conteudo.uf);
                } //end if.
                else {
                    //CEP não Encontrado.
                    limpa_formulário_cep();
                    alert("CEP não encontrado.");
                }
            }
                
            function pesquisacep(valor) {
        
                //Nova variável "cep" somente com dígitos.
                var cep = valor.replace(/\D/g, '');
        
                //Verifica se campo cep possui valor informado.
                if (cep != "") {
        
                    //Expressão regular para validar o CEP.
                    var validacep = /^[0-9]{8}$/;
        
                    //Valida o formato do CEP.
                    if(validacep.test(cep)) {
        
                        //Preenche os campos com "..." enquanto consulta webservice.
                        document.getElementById('rua').value="...";
                        document.getElementById('bairro').value="...";
                        document.getElementById('cidade').value="...";
                        document.getElementById('uf').value="...";
        
                        //Cria um elemento javascript.
                        var script = document.createElement('script');
        
                        //Sincroniza com o callback.
                        script.src = 'https://viacep.com.br/ws/'+ cep + '/json/?callback=meu_callback';
        
                        //Insere script no documento e carrega o conteúdo.
                        document.body.appendChild(script);
        
                    } //end if.
                    else {
                        //cep é inválido.
                        limpa_formulário_cep();
                        alert("Formato de CEP inválido.");
                    }
                } //end if.
                else {
                    //cep sem valor, limpa formulário.
                    limpa_formulário_cep();
                }
            };
        
            </script>
            </head>
            <body>
            <!-- Inicio do formulario -->
              <table border="1px" class="table">
                <tr>
                    <thead class="thead-light">
                    <th>Rua</th>
                    <th>Bairro</th>
                    <th>Cidade</th>
                    <th>Estado</th>
                    <th>Editar</th>
                    <th>Excluir</th>
                    </thead>
                    <tbody>
                    <form method="get" action="" class="">
                        <label>Cep:</label><br>
                        <input name="cep" type="text" id="cep" value="" size="10" maxlength="9"
                         onblur="pesquisacep(this.value);" />
                        <td scole="col"><input name="rua" type="text" id="rua" size="20" value=""/></td>
                        <td scole="col"><input name="bairro" type="text" id="bairro" size="20" /></td>
                        <td scole="col"><input name="cidade" type="text" id="cidade" size="20" /></td>
                        <td scole="col"><input name="uf" type="text" id="uf" size="20" /></td>
                      <td scole="col"><a id="editar" href="#cep" class="btn btn-danger"><i class="icon-trash icon-white"><img src="https://icon-icons.com/icons2/620/PNG/32/pencil-striped-symbol-for-interface-edit-buttons_icon-icons.com_56782.png"></a></td>
                      <td scole="col"><a id="excluir" onclick="limpa_formulário_cep()" class="btn btn-danger"><img src="https://icon-icons.com/icons2/1154/PNG/32/1486564399-close_81512.png"><i class="icon-trash icon-white"></i></a></td>
                      </form>
                </tr>
              </table>
            </form>
            </body>
            </html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.