Bem para criar o nosso projeto você vai precisar do seguinte arquivo HTML, e poderá nomeá-lo de tabelaDinamica.html :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Adicionar e Remover Linha com jQuery</title>
<link href="stylesheets/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/funcao.js"></script>
</head>
<body>
<div class="container">
<h2>cadastro de Funcionários</h2>
<hr />
<br /><br />
<div class="table-responsive">
<table id="products-table" class="table table-hover table-bordered">
<tbody>
<tr>
<th>Código de pessoa</th>
<th>Nome</th>
<th>Cargo - Função</th>
<th>E-mail</th>
<th>CPF</th>
<th class="actions">Ações</th>
</tr>
<tr>
<td><input type="text" name="id"></td>
<td><input type="text" name="nome"></td>
<td><select name="cargo">
<option value="gerente" name="gerente">Gerente</option>
<option value="Professor" name="Professor">Professor</option>
<option value="Programador" name="Programador">Programador</option>
</select>
</td>
<td><input type="text" name="email"></td>
<td><input type="text" name="cpf"></td>
<td class="actions">
<button class="btn btn-large btn-danger" onclick="RemoveTableRow(this)" type="button">Remover</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="6" style="text-align: left;">
<button class="btn btn-large btn-success" onclick="AddTableRow(this)" type="button">Adicionar Funcionário</button>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</body>
</html>
Entendendo o código: O que este HTML basicamente faz é criar uma tabela que possui um id products-table que tem relação com o JQuery. Possui uma class chamada table table-hover table-bordered responsável por chamar as funções CSS do nosso arquivo bootstrap.css que irá fazer a estilização da nossa tabela. cria campos de formulário a serem preenchido, e no final tem-se um botão adicionar funcionário que tem acesso a função AdTableRow(this), encontrada no arquivo funcao.js que cria uma nova linha na tabela. Há o botão remover que também tem ação em um método RemoveTableRow(this), para remover esta linha encontrado no arquivo funcao.js. E cada um desses botões possui uma class responsável por chamar a função CSS do arquivo bootstrap.css que faz a estilização dos botões.
Próximo arquivo: funcao.js
(function($) {
RemoveTableRow = function(handler) {
var tr = $(handler).closest('tr');
tr.fadeOut(400, function(){
tr.remove();
});
return false;
};
AddTableRow = function() {
var newRow = $("<tr>");
var cols = "";
cols += '<td><input type="text" name="id"></td>';
cols += '<td><input type="text" name="nome"></td>';
cols += '<td><select name="cargo">';
cols += '<option value="gerente" name="gerente">Gerente</option>';
cols += '<option value="Professor" name="Professor">Professor</option>';
cols += '<option value="Programador" name="Programador">Programador</option>';
cols += '</select></td>';
cols += '<td><input type="text" name="email"></td>';
cols += '<td><input type="text" name="cpf"></td>';
cols += '<td class="actions">';
cols += '<button class="btn btn-large btn-danger" onclick="RemoveTableRow(this)" type="button">Remover</button>';
cols += '</td>';
newRow.append(cols);
$("#products-table").append(newRow);
return false;
};
})(jQuery);
Este arquivo que criamos tem as funções de remover linha em tabela e adicionar linha em tabela. As quais dependem do arquivo jQuery.
Então é isto: Para fazer este sistema funcionar crie esses dois arquivos HTML(tabelaDinamica.html) e JS (funcao.js) e baixe os arquivos bootstrap.css e jquery.js.
Atenção quanto a pasta dos arquivos. Nesse exemplo nós consideramos que os arquivos JavaScript estaríam dentro de uma pasta chamada js. E o bootstrap.css estaria na pasta stylesheets.
Amigo, muito obrigado seu código me ajudou de uma forma sem tamanho!!!!
ResponderExcluirDe nada Weyder Ferreira, estamos aí nesse mundo da programação para ajudarmos uns aos outros. Fico feliz que minha postagem tenha sido útil!
ExcluirExcelente trabalho
ResponderExcluiramigo otimo artigo...sou iniciante e tenho uma duvida, como ficaria no AddTableRow se eu escolhesse popular a combobox de dados oruindos de banco , utilizando array por exemplo
ResponderExcluirExcelente Post.. Parabéns e obrigado..
ResponderExcluirUma dúvida. Como faço para recuperar os dados preenchidos e enviar para a mesma página como POST? Coloquei um botão, porém nenhuma das informações aparecem no Post.
Obrigado!
Como posso fazer para pegar as informações dos campos?
ResponderExcluirOla Gabriel, tudo bem com você?
ResponderExcluirEntão amigo, gostei da tabela que você fez, eu gostaria de saber se tem como colocar essa tabela em um site e ocultar os botoes, de forma que so eu tenha acesso.
Eu estou aprendendo a programar, e para isso estou fazendo um site para a escola de teologia da igreja que eu frequento, e nesse site eu gostaria de colocar uma tabela que tenha "numero (contador), nome da apostila, autor, e download de pdf!
Desde já agradeço
Não consigo encontrar o arquivo JQuery aquí na página. Alguém pode me dar uma ajuda?
ResponderExcluirNão consigo a funcionar e já copiei ambos os códigos
ResponderExcluir