Cześć, mam za zadanie stworzyć kalkulator zużycia energii. Stworzyłem proste tabele w HTMLu oraz dodawanie wiersza i obliczanie w JS. Moim problemem jest to, że po dodaniu 2, 3 itd wiersza chciałbym aby to również się zliczało i wpisało łączny wynik do tabeli. Jak to powinno wyglądać?
JS:
$(function() {
$('#dodaj').on('click', function() {
var row = $('table:first tr:last')
var id = parseInt(row.attr('id').split('_')[1]) + 1;
$('table:first').append(row.clone().attr('id', 'urzadzenie_' + id));
});
$('table:first').on('click', '[type="button"]', function() {
var row = $("table:first tr:last");
var id = parseInt(row.attr('id').split('_')[1]);
if (id !== 1) {
$(this).closest('tr').remove();
}
});
$("#oblicz").on('click', function() {
var cena = $("#cena_energii").val();
var moc = $("#moc").val();
var czas = $("#czas").val();
var zuzycie = moc * czas / 1000;
var koszt = zuzycie * cena;
$("#dzienna_energia").html((zuzycie).toFixed(2));
$("#miesieczna_energia").html((zuzycie*30).toFixed(2));
$("#roczna_energia").html((zuzycie*365).toFixed(2));
$("#dzienny_koszt").html((koszt).toFixed(2));
$("#miesieczny_koszt").html((koszt*30).toFixed(2));
$("#roczny_koszt").html((koszt*365).toFixed(2));
}); });
Tutaj HTML:
<table class="table mt-4 text-center">
<thead>
<tr>
<th>Nazwa</th>
<th>Moc [W]</th>
<th>Średni czas użycia [h]</th>
<th></th>
</tr>
</thead>
<tbody>
<tr id="urzadzenie_1">
<td><input type="text" class="form-control" id="nazwa" placeholder="Podaj nazwę urządzenia"></td>
<td><input type="text" class="form-control" id="moc" placeholder="Podaj moc"></td>
<td><input type="text" class="form-control" id="czas" placeholder="Podaj czas"></td>
<td><input type="button" class="btn btn-sm btn-danger" value="X"></td>
</tr>
</tbody>
</table>
<button class="btn btn-primary mr-5" id="dodaj">Dodaj urządzenie</button>
<button class="btn btn-success" id="oblicz">Oblicz</button>
<table class="table text-center mt-4">
<thead>
<th>Wyniki</th>
<th>Zużyta energia [kWh]</th>
<th>Koszt [zł]</th>
</thead>
<tbody>
<tr>
<td>dziennie</td>
<td id="dzienna_energia">0</td>
<td id="dzienny_koszt">0</td>
</tr>
<tr>
<td>miesięcznie</td>
<td id="miesieczna_energia">0</td>
<td id="miesieczny_koszt">0</td>
</tr>
<tr>
<td>rocznie</td>
<td id="roczna_energia">0</td>
<td id="roczny_koszt">0</td>
</tr>
</tbody>
</table>