Skip to content

Commit

Permalink
first commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@diegotpereira
diegotpereira committed Aug 26, 2021
0 parents commit e7b9e76
Show file tree
Hide file tree
Showing 3 changed files with 215 additions and 0 deletions.
64 changes: 64 additions & 0 deletions css/estilo.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
body>table {
width: 80%;
}

table {
border-collapse: collapse;
}

table.lista {
width: 100%;
}

td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}

tr:nth-child(even),
table.lista thead>tr {
background-color: #dddddd;
}

input[type=text],
input[type=number] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border-radius: 4px;
box-sizing: border-box;
}

input[type=enviar] {
width: 30px;
background-color: #ddd;
color: #000;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}

form div.form-acao-botoes {
text-align: right;
}

a {
cursor: pointer;
text-decoration: underline;
color: #0000ee;
margin-right: 4px;
}

label.validacao-erro {
color: red;
margin-left: 5px;
}

.hide {
display: none;
}
58 changes: 58 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="pt-br">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Operações CRUD de JavaScript puro com Html</title>
<link rel="stylesheet" href="css/estilo.css">
</head>

<body>
<table>
<tr>
<td>
<form onsubmit="event.preventDefault(); onFormSubmit();" autocomplete="off">
<div>
<label>Nome Completo*</label>
<label class="validacao-erro hide" id="nomeCompletoValidacaoErro">Este campo é obrigatório.</label>
<input type="text" name="nomeCompleto" id="nomeCompleto">
</div>
<div>
<label for="">Código do Colaborador</label>
<input type="text" name="codigoFunc" id="codigoFunc">
</div>
<div>
<label for="">Sálario</label>
<input type="text" name="salario" id="salario">
</div>
<div>
<label for="">Cidade</label>
<input type="text" name="cidade" id="cidade">
</div>
<div class="form-acao-botoes">
<input type="submit" value="Enviar">
</div>
</form>
</td>
<table class="lista" id="listaFunc">
<thead>
<tr>
<th>Nome Completo</th>
<th>Código do Colaborador</th>
<th>Sálario</th>
<th>Cidade</th>
<th></th>
</tr>
</thead>
<tbody>

</tbody>
</table>
</tr>
</table>
<script type="text/javascript" src="js/meuScript.js"></script>
</body>

</html>
93 changes: 93 additions & 0 deletions js/meuScript.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
var linhaSelecionada = null

function onFormSubmit() {
if (validar) {
var dadosFormulario = lerDadosFormulario();
if (linhaSelecionada == null)
inserirNovoRegistro(dadosFormulario);
else
atualizarRegistro(dadosFormulario);
limparFormulario();
}
}

function lerDadosFormulario() {
var dadosFormulario = {};
dadosFormulario["nomeCompleto"] = document.getElementById("nomeCompleto").value;
dadosFormulario["codigoFunc"] = document.getElementById("codigoFunc").value;
dadosFormulario["salario"] = document.getElementById("salario").value;
dadosFormulario["cidade"] = document.getElementById("cidade").value;

return dadosFormulario;
}

function inserirNovoRegistro(data) {
var minhaTabela = document.getElementById("listaFunc").getElementsByTagName('tbody')[0];

var newRow = minhaTabela.insertRow(minhaTabela.length);

cell1 = newRow.insertCell(0);
cell1.innerHTML = data.nomeCompleto;

cell2 = newRow.insertCell(1);
cell2.innerHTML = data.codigoFunc;

cell3 = newRow.insertCell(2);
cell3.innerHTML = data.salario;

cell4 = newRow.insertCell(3);
cell4.innerHTML = data.cidade;
cell4 = newRow.insertCell(4);

cell4.innerHTML = `<a onClick="naEdicao(this)">Editar</a>
<a onClick="naExclusao(this)">Excluir</a>`;


}

function limparFormulario() {
document.getElementById("nomeCompleto").value = "";
document.getElementById("codigoFunc").value = "";
document.getElementById("salario").value = "";
document.getElementById("cidade").value = "";

linhaSelecionada = null;
}

function naEdicao(td) {
linhaSelecionada = td.parentElement.parentElement;
document.getElementById("nomeCompleto").value = linhaSelecionada.cells[0].innerHTML;
document.getElementById("codigoFunc").value = linhaSelecionada.cells[1].innerHTML;
document.getElementById("salario").value = linhaSelecionada.cells[2].innerHTML;
document.getElementById("cidade").value = linhaSelecionada.cells[3].innerHTML;
}

function atualizarRegistro(dadosFormulario) {
linhaSelecionada.cells[0].innerHTML = dadosFormulario.nomeCompleto;
linhaSelecionada.cells[1].innerHTML = dadosFormulario.codigoFunc;
linhaSelecionada.cells[2].innerHTML = dadosFormulario.salario;
linhaSelecionada.cells[3].innerHTML = dadosFormulario.cidade;
}

function naExclusao(td) {
if (confirm('Tem certeza que deseja deletar este registro?')) {
linha = td.parentElement.parentElement;
document.getElementById("listaFunc").deleteRow(linha.rowIndex);

limparFormulario();
}
}

function validar() {
eValido = true;
if (document.getElementById("nomeCompleto").value == "") {
eValido = false;
document.getElementById("nomeCompletoValidacaoErro").classList.remove(hide);
} else {
eValido = true;
if (!document.getElementById("nomeCompletoValidacaoErro").classList.contains("hide"))
document.getElementById("nomeCompletoValidacaoErro").classList.add("hide");

}
return eValido;
}

0 comments on commit e7b9e76

Please sign in to comment.