Skip to content

Instantly share code, notes, and snippets.

@JRGGRoberto

JRGGRoberto/TabelaDinamica.html

Last active March 30, 2023 19:33
Show Gist options
  • Save JRGGRoberto/135bddd7d51ad9f229186cfa00037d86 to your computer and use it in GitHub Desktop.
Save JRGGRoberto/135bddd7d51ad9f229186cfa00037d86 to your computer and use it in GitHub Desktop.
Download ZIP
Tabela dinamica. Dados inseridos via input. Javascript
Raw
TabelaDinamica.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Modal Example</h2>
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
<div class="form-group table-responsive-sm">
<table id="tabela-equipe" class="table table-bordered table-sm">
<thead>
<tr>
<th>ID</th>
<th>Nome</th>
<th>Instituição</th>
<th>Formação</th>
<th>Função na equipe</th>
<th>Telefone</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<!-- The Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<form class="form-group">
<label for="nome">Nome</label> <input type="text" class="form-control" id="nome">
<label for="instituicao">Instituição</label> <input type="text" class="form-control" id="instituicao">
<label for="formacao">Formação</label> <input type="text" class="form-control" id="formacao">
<label for="funcao">Função na equipe</label> <input type="text" class="form-control" id="funcao">
<label for="telefone">Telefone</label> <input type="text" class="form-control" id="telefone">
<BR>
<button type="button" onclick="adicionarContato()">Adicionar</button>
</form>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
</div>
<script>
// Array para armazenar os equipe
let equipe = [];
// Função para adicionar um contato na tabela
function adicionarContato() {
// Obter os valores dos inputs
let nome = document.getElementById("nome").value;
let instituicao = document.getElementById("instituicao").value;
let formacao = document.getElementById("formacao").value;
let funcao = document.getElementById("funcao").value;
let telefone = document.getElementById("telefone").value;
if( nome.length > 0 ) {
// Criar um novo objeto de contato
let novoContato = {
id: equipe.length + 1,
nome: nome,
instituicao: instituicao,
formacao: formacao,
funcao: funcao,
telefone: telefone
};
// Adicionar o novo contato no array
equipe.push(novoContato);
// Adicionar uma nova linha na tabela
let tabela = document.getElementById("tabela-equipe").getElementsByTagName("tbody")[0];
let novaLinha = tabela.insertRow();
let celId = novaLinha.insertCell(0);
let celNome = novaLinha.insertCell(1);
let celInstituicao = novaLinha.insertCell(2);
let celFormacao = novaLinha.insertCell(3);
let celFuncao = novaLinha.insertCell(4);
let celTelefone = novaLinha.insertCell(5);
let celDelete = novaLinha.insertCell(6);
celId.innerHTML = novoContato.id;
celNome.innerHTML = novoContato.nome;
celInstituicao.innerHTML = novoContato.instituicao;
celFormacao.innerHTML = novoContato.formacao;
celFuncao.innerHTML = novoContato.funcao;
celTelefone.innerHTML = novoContato.telefone;
celDelete.innerHTML = '<button type="button" class="btn btn-danger btn-sm mb-2" onclick="excluirContato(' + novoContato.id + ')">🗑 Remover</button>';
// Limpar os inputs
document.getElementById("nome").value = "";
document.getElementById("instituicao").value = "";
document.getElementById("formacao").value = "";
document.getElementById("funcao").value = "";
document.getElementById("telefone").value = "";
}
}
// Função para excluir um contato da tabela
function excluirContato(id) {
// Encontrar o índice do contato no array
let index = equipe.findIndex(contato => contato.id === id);
// Remover o contato do array
equipe.splice(index, 1);
// Remover a linha correspondente da tabela
let tabela = document.getElementById("tabela-equipe").getElementsByTagName("tbody")[0];
tabela.deleteRow(index);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment