Dox probabilità

by BeNdErR

HTML

<ul class="headers">
    <li> <span class="headerqty">Quantità</span>
 <span class="headerprice">Valore</span>
 <span class="headerpercentage">Percentuale</span>

    </li>
</ul>
<ul class="rowlist"></ul>
<ul class="totals">
    <li>
        <input type='numeric' placeholder='Totale Quantità' class='totqty' disabled />
        <input type='numeric' placeholder='Totale Vincita' class='totprice' disabled /> <span class='totprobability'></span>
    </li>
</ul>

Valore maggiore o uguale di <input type='numeric' class='valgt' /><span class='probabilitygt'></span><br />
Valore minore o uguale di <input type='numeric' class='vallt' /><span class='probabilitylt'></span><br />
Valore compreso tra <input type='numeric' class='valgtlt-gt' /> e <input type='numeric' class='valgtlt-lt' /><span class='probabilitygtlt'></span>

CSS

.rowlist, .totals, .headers {
    width: 100%;
    /*background: red;*/
    list-style-type: none;
}
.qty, .price, .totqty, .totprice {
    width: 100px;
    margin-right: 5px;
}
.probability {
    display: inline-block;
    min-width: 150px;
}
.rowlist .addrow {
    display: none;
}
.rowlist li:only-child .removerow {
    display: none;
}
.rowlist li:last-child .addrow {
    display: inline-block;
}
.headerqty, .headerprice {
    display: inline-block;
    min-width: 100px;
    margin-right: 5px;
}
.headerpercentage {
    display: inline-block;
    min-width: 150px;
}
.valgt, .vallt, .valgtlt-gt, .valgtlt-lt{
    width: 100px;
}

JavaScript

$(document).ready(function () {
    function addRow() {
        $(".rowlist").append(
            "<li>" +
            "<input type='numeric' placeholder='Quantità' class='qty' />" +
            "<input type='numeric' placeholder='Vincita' class='price' />" +
            "<span class='probability'></span>" +
            "<button class='removerow'> - </button>" +
            "<button class='addrow'> + </button>" +
            "</li>");
    };


    function updateProbability() {
        var $rows = $(".rowlist li");
        $.each($rows, function (i, e) {
            var $qty = $(e).find(".qty");
            var $totQty = $(".totqty");
            var $price = $(e).find(".price");
            var qtyVal = $qty.val() ? parseFloat($qty.val()) : 0;
            var totqtyVal = $totQty.val() ? parseFloat($totQty.val()) : 0;
            //var priceVal = $price.val() ? parseInt($price.val()) : 0;

            var probability = (qtyVal / totqtyVal) * 100; // * qtyVal;
            $(e).find(".probability").html(probability.toFixed(2) + "%").data("tot", probability.toFixed(2));
        });
    }

    $(".rowlist").on("click", ".addrow", function () {
        addRow();
        //calculateProbability();
    });
    $(".rowlist").on("click", ".removerow", function () {
        $(this).closest("li").remove();
    });

    $(".rowlist").on("change", ".qty", function () {
        var totQty = 0;
        $.each($(".rowlist .qty"), function (i, e) {
            var value = $(e).val() ? parseFloat($(e).val()) : 0;
            totQty += value;
        })
        $(".totqty").val(totQty).trigger("change");
    });
    $(".rowlist").on("change", ".price", function () {
        var totQty = 0;
        $.each($(".rowlist .price"), function (i, e) {
            var value = $(e).val() ? parseFloat($(e).val()) : 0;
            totQty += value;
        })
        $(".totprice").val(totQty).trigger("change");
    });
    $(".totqty, .totprice").on("change", function () {
       ...