Bom dia.
Iniciei um simples CRUD para utilizar no trabalho. A princípio era apenas para gerar uma tabela com os valores inseridos no formulário, até ai tinha dado tudo certo... Porém decidi dar uma incrementada no projeto aproveitando o código para fazer algumas somas como a quantidade total de vendas, quantidade total de produtos vendidos, valor da venda e etc.
O problema é quando decido alterar alguma linha da tabela com o botão update / delete. Não consegui achar uma forma de usar os valores antigos para fazer a soma ou até a subtração dos valores, caso o novo input seja menor que o antigo...
Até consegui fazer uma gambiarra que pegava os últimos valores inseridos no formulário e comparava com a ultima linha da tabela, mas pra isto funcionar eu não poderia apagar os dados inseridos no forms, e só funcionava para a ultima linha inserida na tabela.
Obs: O front não está finalizado, estou mais preocupado em arrumar a parte funcional primeiro. Mas se alguém souber por qual motivo a cor dos botões da linha só aparecem quando passa o mouse encima fico agradecido.
Segue o código e obrigado
//primeiro script - Pega os valores e gera a tabela
var form = document.getElementById("form")
function addData()
{
//pega valor dos inputs e passa pra linhas da tabela
var cliente=document.sample.cliente.value;
var quantidade=document.sample.quantidade.value;
var milheiro=document.sample.milheiro.value
var tipo = getTipo()
var socio = getSocio()
//cria a linha
var tr = document.createElement('tr');
//cria as celulas
var td1 = tr.appendChild(document.createElement('td'));
var td2 = tr.appendChild(document.createElement('td'));
var td3 = tr.appendChild(document.createElement('td'));
var td4 = tr.appendChild(document.createElement('td'));
var td5 = tr.appendChild(document.createElement('td'));
var td6 = tr.appendChild(document.createElement('td'));
var td7 = tr.appendChild(document.createElement('button'));
var td8 = tr.appendChild(document.createElement('button'));
//adiciona a linha a tabela
document.getElementById("tbl").appendChild(tr);
// SOMA DOS VALORES //
var $quantidade = parseFloat(quantidade)
var $milheiro = parseFloat(milheiro)
var $valor=calculaValor($quantidade, $milheiro)
getTotal($valor, $quantidade, tipo, socio)
//passa o valor da compra para o formulário
var valorForm = document.getElementById('val').value = $valor.toFixed(2)
//passa os valores pras celulas e cria btn de excluir e add
td1.innerHTML=cliente;
td2.innerHTML=quantidade;
td3.innerHTML=tipo
td4.innerHTML=milheiro
td5.innerHTML=valorForm
td6.innerHTML=socio
td7.innerHTML='<input type="button" name="del" value="Delete" onclick="delStudent(this);" class="btn btn-danger">'
td8.innerHTML='<input type="button" name="up" value="Update" onclick="UpStud(this);" class="btn btn-primary">'
//'<button name="up" value="Update" onclick="UpStud(this);" class="btn">Update</button>'
}
//passa toda a row no argumento
function UpStud(stud){
var cliente=document.sample.cliente.value;
var quantidade=document.sample.quantidade.value;
var tipo=getTipo();
var socio=getSocio();
var milheiro=document.sample.milheiro.value;
var valor=document.sample.valor.value;
var s = stud.parentNode.parentNode;
var tr = document.createElement('tr');
var td1 = tr.appendChild(document.createElement('td'));
var td2 = tr.appendChild(document.createElement('td'));
var td3 = tr.appendChild(document.createElement('td'));
var td4 = tr.appendChild(document.createElement('td'));
var td5 = tr.appendChild(document.createElement('td'));
var td6 = tr.appendChild(document.createElement('td'));
var td7 = tr.appendChild(document.createElement('td'));
var td8 = tr.appendChild(document.createElement('td'));
td1.innerHTML='<input type="text" name="cliente1" class="border border-dark form-control">';
td2.innerHTML='<input type="number" name="quantidade1" class="border border-dark form-control">';
td3.innerHTML ='<select name="produto1" id="prod1" onchange="getTipo()" class="border border-dark form-control"> <option value="escolha" selected>Produto</option> <option value="t6s">Tijolo 6 Furos solto</option> <option value="t6p">Tijolo 6 Furos paletizado</option> <option value="t9s">Tijolo 9 Furos solto</option> <option value="t9p">Tijolo 9 Furos paletizado</option> </select> '
td4.innerHTML ='<input type="number" name="milheiro1" class="border border-dark form-control">';
td5.innerHTML=valor;
td6.innerHTML='<select name="socio" id="soc1" onchange="getSocio()" class="border border-dark form-control"> <option value="M" selected>Marilza</option> <option value="J">Jac</option> </select>';
td7.innerHTML='<input type="button" name="del" value="Delete" onclick="delStudent(this);" class="btn btn-danger">';
td8.innerHTML='<input type="button" name="up" value="Update" onclick="addUpStud(this);" class="btn btn-primary">';
document.getElementById("tbl").replaceChild(tr, s);
}
//passa os dados atualizados para a row
function addUpStud(stud){
var cliente=document.sample.cliente1.value;
var quantidade=document.sample.quantidade1.value;
var milheiro=document.sample.milheiro1.value;
var valor=document.sample.valor.value
var tipo=getTipo1()
var socio=getSocio1()
var $quantidade = parseFloat(quantidade)
var $milheiro = parseFloat(milheiro)
var $valor=calculaValor($quantidade, $milheiro)
var s = stud.parentNode.parentNode;
var tr = document.createElement('tr');
getTotal()
var td1 = tr.appendChild(document.createElement('td'));
var td2 = tr.appendChild(document.createElement('td'));
var td3 = tr.appendChild(document.createElement('td'));
var td4 = tr.appendChild(document.createElement('td'));
var td5 = tr.appendChild(document.createElement('td'));
var td6 = tr.appendChild(document.createElement('td'));
var td7 = tr.appendChild(document.createElement('td'));
var td8 = tr.appendChild(document.createElement('td'));
td1.innerHTML=cliente;
td2.innerHTML=quantidade;
td3.innerHTML=tipo
td4.innerHTML=milheiro
td5.innerHTML=calculaValor(quantidade, milheiro)
td6.innerHTML=socio
td7.innerHTML='<input type="button" name="del" value="Delete" onclick="delStudent(this);" class="btn btn-danger">'
td8.innerHTML='<input type="button" name="up" value="Update" onclick="UpStud(this);" class="btn btn-primary">'
document.getElementById("tbl").replaceChild(tr, s);
//console.log(qtTotalTijolos , typeof(qtTotalTijolos))
}
function delStudent(Stud){
var s=Stud.parentNode.parentNode;
s.parentNode.removeChild(s);
}
//segundo script - faz os cálculos
var tot6f = 0
var tot9f = 0
var valor = 0
var divisao = 0;
var qtTotalTijolos = 0
var sumVal = 0;
function getData(){
var date = document.getElementById('mdp-demo').value
console.log(date)
}
var containerr = document.getElementById("containerr")
var btn = document.getElementById("action-btn")
btn.addEventListener("click" , function(){
if(containerr.style.display === "none"){
containerr.style.display = "block"
}else{
containerr.style.display = "none"
}
})
//pega produto
function getTipo(){
let inputSelect = document.getElementById('prod')
let op = inputSelect.options[inputSelect.selectedIndex].text;
return op;
}
function getTipo1(){
let inputSelect = document.getElementById('prod1')
let op = inputSelect.options[inputSelect.selectedIndex].text;
return op;
}
//pega sócio
function getSocio(){
let inputSelect = document.getElementById('soc')
let op = inputSelect.options[inputSelect.selectedIndex].text;
return op;
}
function getSocio1(){
let inputSelect = document.getElementById('soc1')
let op = inputSelect.options[inputSelect.selectedIndex].text;
return op;
}
function soma6(qt){
let total =0
tot6f += qt
total = tot6f
return total
}
function soma9(qt){
let total =0
tot9f += qt
total = tot9f
return total
}
function calculaValor(qt, m){
valor = parseFloat(qt * m)
return valor
}
function getTotal(v, qt, t, s){
console.log(v, qt, t, s)
sumVal += v
divisao = sumVal / 2;
qtTotalTijolos += parseFloat(qt)
if( t == "Tijolo 6 Furos solto"){
tot6f = soma6(qt)
}
if( t == "Tijolo 9 Furos solto"){
tot9f = soma9(qt)
}
var total = document.getElementById("FTotal").value = sumVal;
var divi = document.getElementById("divisao").value = divisao;
var qtTotal = document.getElementById("qtTotal").value = qtTotalTijolos;
var qt6 = document.getElementById("qtTotal6").value = tot6f
var qt9 = document.getElementById("qtTotal9").value = tot9f
console.log(`Tipo do produto: ${t}`)
console.log(`A quantidade total de tijolos é: ${qtTotalTijolos}`)
console.log(`O total de tijolos 6 furos é: ${tot6f}`)
console.log(`O total de tijolos 9 furos é: ${tot9f}`)
console.log(`O valor da carga é : ${v.toFixed(2)}` )
console.log(`A soma total dos valores é: ${sumVal.toFixed(2)}`)
console.log(`A divisão da soma é: ${divisao}`)
console.log('------------------------------------------------------')
}
body {
background-color: bisque;
}
#containerr {
display: none;
}
thead,
td {
background-color: rgba(22, 211, 22, 0.61);
}
<!DOCTYPE html>
<html>
<head>
<title>Vendas</title>
<!-- bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<!-- script dataPicker -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/dubrox/Multiple-Dates-Picker-for-jQuery-UI@master/jquery-ui.multidatespicker.js"></script>
<!-- css dataPicker -->
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<button id="action-btn">Calendario</button>
<div id="containerr">
<div id="mdp-demo"></div>
<button class="button" onclick="getData()">Selecionar datas</button><br>
</div>
<form method="POST" name="sample" id="form">
<br>
<div class="row">
<div class="form-group col-md-4">
<label for="inputCliente">Cliente</label>
<input type="text" name="cliente" id="cliente" class="form-control text-end">
</div>
<div class="form-group col-md-4">
<label for="inputQuantidade">Quantidade</label>
<input type="number" name="quantidade" class="form-control">
</div>
<div class="form-group col-md-4">
<label for="inputProduto"></label>
<select name="produto" id="prod" onchange="getTipo()" class="form-control">
<option value="escolha" id="inputProduto" selected>Produto</option>
<option value="t6s">Tijolo 6 Furos solto</option>
<option value="t6p">Tijolo 6 Furos paletizado</option>
<option value="t9s">Tijolo 9 Furos solto</option>
<option value="t9p">Tijolo 9 Furos paletizado</option>
<option value="tav">Tavela</option>
</select>
</div>
</div>
<div class="row">
<div class="form-group col-md-4">
<label for="inputMilheiro">Milheiro</label>
<input type='number' name="milheiro" class="form-control">
</div>
<div class="form-group col-md-4">
<label for="InputSocio"></label>
<select name="socio" id="soc" onchange="getSocio()" class="form-control">
<option value="escolheSocio" id="inputSocio" selected>Pago para</option>
<option value="M">Marilza</option>
<option value="J">Jac</option>
</select>
</div>
<div class="form-group col-md-4">
<label for="valorFinal">valor</label>
<input type="text" id="val" name="valor" class="form-control">
</div>
</div>
<br><br>
<input type="button" name="add" value="Adicionar Dados" onclick="addData();" class="btn btn-success">
<hr>
<table id="tbl" class="table table-bordered">
<thead>
<th scope="col">Cliente</th>
<th scope="col">Quantidade</th>
<th scope="col">Produto</th>
<th scope="col">Milheiro</th>
<th scope="col">Valor</th>
<th scope="col">Pago a:</th>
</thead>
<tbody id="body">
</tbody>
</table>
</form>
<div class="col-5">
<div class="input-group mb-3">
<span class="input-group-text">Total$</span>
<input type="number" class="form-control text-end" id="FTotal" name="FTotal" disabled="">
</div>
<div class="input-group mb-3">
<span class="input-group-text">Divisão</span>
<input type="number" class="form-control text-end" id="divisao" name="divisao">
</div>
<div class="input-group mb-3">
<span class="input-group-text">total Tijolos</span>
<input type="number" class="form-control text-end" id="qtTotal" name="qtTotal" disabled="">
</div>
<div class="input-group mb-3">
<span class="input-group-text">total Tijolos 6 Furos</span>
<input type="number" class="form-control text-end" id="qtTotal6" name="qtTotal6" disabled="">
</div>
<div class="input-group mb-3">
<span class="input-group-text">total Tijolos 9 Furos</span>
<input type="number" class="form-control text-end" id="qtTotal9" name="qtTotal9" disabled="">
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<script src="js/script.js"></script>
<script src="js/funcoes.js"></script>
<script>
$(document).ready(function() {
var date = $('#mdp-demo').multiDatesPicker({
maxPicks: 2,
dateFormat: "dd-mm-yy",
});
});
</script>
</body>
</html>