lewis4u lewis4u - 7 months ago 74
Javascript Question

jQuery dynamic table calculation

I have made a dynamic form/table and i can't calculate new added rows correctly.

All is fine for static part, but when I add a new row the ID's and classes of a row don't match the function...new added rows are not calculated at all.
can someone help please?

<div>
<h2>Offer</h2>
<form>
<table id="t1">
<tr>
<th><button type="button" class="addRow">Add</button></th>
<th>Quantity</th>
<th>Price per hour</th>
<th>Hours</th>
<th>Total</th>
</tr>
<tr>
<td><select name="personal"><optgroup label="Personal"><option value="k&ouml;che">K&ouml;che</option><option value="barkeeper">Barkeeper</option><option value="garderobiere">Garderobiere</option><option value="chauffeure">Chauffeure</option><option value="oberkellner">Oberkellner</option><option value="serviceleitung">Serviceleitung</option><option value="hilfskoch">Hilfskoch</option><option value="servicekr&auml;fte">Servicekr&auml;fte</option></optgroup></select></td>
<td><input name="anzahl" class="amount" value="" /></td>
<td><input name="preisps" class="amount" value="" /></td>
<td><input name="stunden" class="amount" value="" /></td>
<td><input name="total" class="total" id="total1" value="" readonly="readonly" /></td>
</tr>
</table>

<br />

<table id="t2">
<tr>
<td>Netto =<br></td>
<td><input id="netto" readonly="readonly" name="netto" type="text" value=""></td>
</tr>
<tr>
<td>Steuer 19% =<br></td>
<td><input id="steuer" readonly="readonly" name="steuer" type="text" value=""></td>
</tr>
<tr>
<td>Brutto =<br></td>
<td><input id="brutto" readonly="readonly" name="brutto" type="text" value=""></td>
</tr>
</table>
<br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</div>


<script>
// main function when page is opened
$(document).ready(function () {

// function for adding a new row
var r=1;
$('.addRow').click(function(){
r++;
$('#t1').append('<tr id="row'+r+'"><td><select name="personal"><optgroup label="Personal"><option value="k&ouml;che">K&ouml;che</option><option value="barkeeper">Barkeeper</option><option value="garderobiere">Garderobiere</option><option value="chauffeure">Chauffeure</option><option value="oberkellner">Oberkellner</option><option value="serviceleitung">Serviceleitung</option><option value="hilfskoch">Hilfskoch</option><option value="servicekr&auml;fte">Servicekr&auml;fte</option></optgroup></select></td><td><input class="amount" value="" /></td><td><input class="amount" value="" /></td><td><input class="amount" value="" /></td><td><input class="total" value="" readonly="readonly" /></td><td><button type="button" name="remove" id="'+r+'" class="btn_remove">X</button></td></tr>');
});
// remove row when X is clicked
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
// calculate everything
$(document).on("keyup", ".amount", calcAll);
});


// function for calculating everything
function calcAll() {
// calculate total for one row
var product = 1;
$(".amount").each(function () {
if (!isNaN(this.value) && this.value.length != 0) {
product *= parseFloat(this.value);
}
$("#total1").val(product.toFixed(2));
});

// sum all totals
var sum = 0;
$(".total").each(function () {
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
}
});
// show values in netto, steuer, brutto fields
$("#netto").val(sum.toFixed(2));
$("#steuer").val(sum.toFixed(2) * 0.19);
$("#brutto").val(parseFloat(sum.toFixed(2)) + parseFloat(($("#steuer").val())));
}
</script>


here is my source code:

http://jsfiddle.net/p2Hbm/86/

Answer

I've made an example on how you can do this on jsFiddle: https://jsfiddle.net/gtcazp7s/

    // main function when page is opened
    $(document).ready(function () {

        // function for adding a new row
        var r = 1;
        $('.addRow').click(function () {
            r++;
            $('#t1').append('<tr id="row' + r + '" class="item"><td><select name="personal"><optgroup label="Personal"><option value="k&ouml;che">K&ouml;che</option><option value="barkeeper">Barkeeper</option><option value="garderobiere">Garderobiere</option><option value="chauffeure">Chauffeure</option><option value="oberkellner">Oberkellner</option><option value="serviceleitung">Serviceleitung</option><option value="hilfskoch">Hilfskoch</option><option value="servicekr&auml;fte">Servicekr&auml;fte</option></optgroup></select></td><td><input class="qnty amount" value="" /></td><td><input class="price amount" value="" /></td><td><input class="hours amount" value="" /></td><td><input class="total" value="" readonly="readonly" /></td><td><button type="button" name="remove" id="' + r + '" class="btn_remove">X</button></td></tr>');
        });
        // remove row when X is clicked
        $(document).on('click', '.btn_remove', function () {
            var button_id = $(this).attr("id");
            $('#row' + button_id + '').remove();
        });
        // calculate everything
        $(document).on("keyup", ".amount", calcAll);
        //$(".amount").on("change", calcAll);
    });

    // function for calculating everything
    function calcAll() {
        // calculate total for one row

        $(".item").each(function () {
            var qnty = 1;
            var price = 1;
            var hours = 1;
            var total = 1;
            if (!isNaN(parseFloat($(this).find(".qnty").val()))) {
                qnty = parseFloat($(this).find(".qnty").val());
            }
            if (!isNaN(parseFloat($(this).find(".price").val()))) {
                price = parseFloat($(this).find(".price").val());
            }
            if (!isNaN(parseFloat($(this).find(".hours").val()))) {
                hours = parseFloat($(this).find(".hours").val());
            }
            total = qnty * price * hours;
            $(this).find(".total").val(total.toFixed(2));
        });

        //$(".amount").each(function () {

        //    if (!isNaN(this.value) && this.value.length != 0) {
        //        product *= parseFloat(this.value);
        //    }
        //    $("#total1").val(product.toFixed(2));
        //    if (!isNaN($(this).find(".qnty"))) {

        //    }
        //});

        // sum all totals
        var sum = 0;
        $(".total").each(function () {
            if (!isNaN(this.value) && this.value.length != 0) {
                sum += parseFloat(this.value);
            }
        });
        // show values in netto, steuer, brutto fields
        $("#netto").val(sum.toFixed(2));
        $("#steuer").val(sum.toFixed(2) * 0.19);
        $("#brutto").val(parseFloat(sum.toFixed(2)) + parseFloat(($("#steuer").val())));
    }

Here's the html part:

<div>
    <h2>Offer</h2>
    <form>
        <table id="t1">
            <tr>
                <th><button type="button" class="addRow">Add</button></th>
                <th>Quantity</th>
                <th>Price per hour</th>
                <th>Hours</th>
                <th>Total</th>
            </tr>
            <tr class="item">
                <td><select name="personal"><optgroup label="Personal"><option value="k&ouml;che">K&ouml;che</option><option value="barkeeper">Barkeeper</option><option value="garderobiere">Garderobiere</option><option value="chauffeure">Chauffeure</option><option value="oberkellner">Oberkellner</option><option value="serviceleitung">Serviceleitung</option><option value="hilfskoch">Hilfskoch</option><option value="servicekr&auml;fte">Servicekr&auml;fte</option></optgroup></select></td>
                <td><input name="anzahl" class="qnty amount" value="" /></td>
                <td><input name="preisps" class="price amount" value="" /></td>
                <td><input name="stunden" class="hours amount" value="" /></td>
                <td><input name="total" class="total" id="total1" value="" readonly="readonly" /></td>
            </tr>
        </table>

        <br />

        <table id="t2">
            <tr>
                <td>Netto =<br></td>
                <td><input id="netto" readonly="readonly" name="netto" type="text" value=""></td>
            </tr>
            <tr>
                <td>Steuer 19% =<br></td>
                <td><input id="steuer" readonly="readonly" name="steuer" type="text" value=""></td>
            </tr>
            <tr>
                <td>Brutto =<br></td>
                <td><input id="brutto" readonly="readonly" name="brutto" type="text" value=""></td>
            </tr>
        </table>
        <br>
        <input type="submit" value="Submit">
        <input type="reset" value="Reset">
    </form>
</div>
Comments