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 !”