Desenvolvimento - Javascript

Fazendo uma combo dinâmica com Jquery

Nesse tutorial vamos aprender a criar uma página que adiciona e remove combos de acordo com a necessidade do usuário.

por Magno Costa


Lá vai meu segundo tutorial aqui no Linha de Código. Hoje no meu trabalho um estagiário me perguntou como criar uma página que adiciona e remove combo de acordo com a necessidade do usuário.

Bom é importante citar que irei trabalhar com o jquery.

O primeiro passo será criar o nosso html para fazer isso, utilizei uma página bem limpa para fixar bem a idéia do tutorial.

Ai vai nosso html bem simples já com o jquery importado.

<html>

            <head>

                        <title>Aprendendo Jquery</title>

                        <script language="javaScript" src="javaScript/jquery.js"></script>

            </head>

            <body>

                        <table>

                                   <tr>

                                               <td>Selecione uma pessoa</td>

                                               <td>

                                                           <select>

                                                                       <option value="magno">Magno</option>

                                                                       <option value="michell">Michell</option>

                                                                       <option value="douglas">Douglas</option>

                                                           </select>

                                               </td>

                                               <td>

                                                           <input type="button" value="+" id="adcionar" />

                                                           <input type="button" value="-" id="remover" />

                                               </td>

                                   </tr>

                        </table>                     

            </body>

</html>

Acho que aqui não preciso explicar nada, só criei um html e adicionei uma tabela com uma linha que tem um botão para o usuário poder fazer a seleção desejada.

Adicionei um botão para caso o usuário deseje acrescentar uma nova caixa de seleção.

Exemplo:

Vamos ao javascript agora?!!!

Bom ai vai o código fonte.

$(document).ready(function(){

           

            $("#adcionar").click(function(){

                       

                        $("tr:last").after("<tr>"+$("tr:last").html()+"</tr>")

                        $("td:last").empty()

            })

            $("#remover").click(function(){

                        if($("tr").length == 1){

                                   alert("nao e possível remover todas as combos")

                        }else{

                                   $("tr:last").remove();

                        }

            })

           

})

Bom na primeira linha coloco uma ação relacionada ao evento carregar página, ou seja, o código javascript só será executado depois que toda a página html estiver sido carregada, para não termos problemas de referenciar um objeto no javascript que ainda não existe em nosso contexto.

ex:

            $(document).ready()

O próximo passo é pegar o botão da página que tem como atributo id a palavra  adicionar e criar um evento para esse botão, ou seja quando o boato for clicado (click) ele executará as ações abaixo.

ex:

            $("#adcionar").click()

Quando o botão adicionar receber um click será efetuada uma busca na última tr do meu código, quando esta for encontrada, adiciono o mesmo conteúdo da tr anterior.

ex:

            $("#tr:last").after()

Se nosso script parasse a execução nesse momento teríamos uma tabela html assim:

                        <table>

                                   <tr>

                                               <td>Selecione uma pessoa</td>

                                               <td>

                                                           <select>

                                                                       <option value="magno">Magno</option>

                                                                       <option value="michell">Michell</option>

                                                                       <option value="douglas">Douglas</option>

                                                           </select>

                                               </td>

                                               <td>

                                                           <input type="button" value="+" id="adcionar" />

                                                           <input type="button" value="-" id="remover" />

                                               </td>

                                   </tr>

                                   <tr>

                                               <td>Selecione uma pessoa</td>

                                               <td>

                                                           <select>

                                                                       <option value="magno">Magno</option>

                                                                       <option value="michell">Michell</option>

                                                                       <option value="douglas">Douglas</option>

                                                           </select>

                                               </td>

                                               <td>

                                                           <input type="button" value="+" id="adcionar" />

                                                           <input type="button" value="-" id="remover" />

                                               </td>

                                   </tr>

                        </table>

Repare que a nova linha foi adicionada perfeitamente, porem eu não gostei do fato do botão adicionar e remover fica aparecendo toda hora, então eu removi esses botões deixando disponíveis somente na primeira linha.

Ex

            $("td:last").empty()

Com o comando acima eu procurei a última td do meu código e limpei o conteúdo dela.

Até aqui nosso código esta ok já esta adicionando perfeitamente, agora só falta remover que é o mais fácil de todos.

Primeiro coloco uma evento relacionado ao botão que tem como atributo com o valor remover.

ex:

            $("#remover").click()

Quando o botão remover for clicado verifico se existe mais de uma linha na minha página, se não tiver, não vou permitir que o usuário remova a única linha da página.

ex:

            if($("tr").length == 1){

                        alert("nao e possível remover todas as combos")

            }                     

Agora se existir mais de uma linha na minha página eu posso permitir que o usuário remova sendo assim:

                        else{

                                   $("tr:last").remove();

                        }

Tá aí galera, desculpe se ficou um pouco grande o tutorial.

Tutorial dedicado ao meu estagiário Douglas Ribeiro mais conhecido na FOA como 10.

Abração galera !!!!

"Pensou em Jquery, pensou no simples !”
Magno Costa

Magno Costa