Obliczanie danych z kilku wierszy

0

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>
1

Najłatwiej i najlepiej będzie, jak wkleisz to na http://jsfiddle.net i podeślesz tutaj link do działającej wersji.

0

Proszę bardzo: https://jsfiddle.net/gs9n370x/

2

Pierwsze mi się rzuca w oczy. Jak dodam urządzenie to co prawda wiersz w tabeli dostaje id="urzadzenie_2". Ale już kolumny dokładniej inputy dostają takie samo id, jak wcześniejsze urządzenie. (id="nazwa", id="moc" id="czas"). Pamiętaj, że ID powinno być zawsze unikalne. Może lepiej skorzystać z class. Ogólnie to ja bym nadał classe, każdemu wierszu w tabeli :

<tr class="urzadzenie"></tr>

Następnie bym wyłapał wszystkie takie wiersze, i obliczał zużycie dla każdego urządzenia, potem to dodawał do ogólnego zużycia.

Coś takiego mniej więcej: https://jsfiddle.net/x8btyn53/4/

1 użytkowników online, w tym zalogowanych: 0, gości: 1