CODEWITHSUNDEEP
jquery
Suas Cat
Suas Cat

Reputation: 21

calculate percentage from total in jquery

Hi I got the following jquery snippets (see it on jsfiddle) to calculate sum row-wise.
In addition i want to calculate the percentage using grand-total. I tried by adding some code in my own to calculate the percentage but i couldn't succeed finding it. I'm noob in jquery so i need your help.

$(function() {
var total = 0,
    $tableTotal = $('.result');

$('tr[data-total]').each(function() {
    var $row = $(this);
    total += $row.data('total');
    $row.find('input').each(function() {
        var $input = $(this);
        $input.data('value', parseVals($input.val()))
        $input.keyup(function() {
            var currRowTot = $row.data('total');
            var currInputVal = parseVals($input.val());
            var diff = currInputVal - $input.data('value');
            $input.data('value', currInputVal)

            var newRowTot = currRowTot + diff;
            $row.data('total', newRowTot).find('.total').text(newRowTot)
            $tableTotal.trigger('changeTotal', [diff])
        });
    });

})

$tableTotal.data('total', total).val(total).on('changeTotal', function(e, rowDiff) {
    var currTotal = $(this).data('total') + rowDiff;
    $(this).data('total', currTotal).val(currTotal);

})


});

function parseVals(val) {
return (val != '') ? parseInt(val) : 0;
}

Please help me!!

Upvotes: 2

Views: 5626

Answers (1)

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76880

You could do (this add a column to every row that holds a % calculated after each input is modified:

$(function() {
    var total = 0,
        $tableTotal = $('.result');

    $('tr[data-total]').each(function() {
        var $row = $(this);
        total += $row.data('total');
        $row.find('input').each(function() {
            var $input = $(this);
            $input.data('value', parseVals($input.val()))
            $input.keyup(function() {
                var currRowTot = $row.data('total');
                var currInputVal = parseVals($input.val());
                var diff = currInputVal - $input.data('value');
                $input.data('value', currInputVal)

                var newRowTot = currRowTot + diff;
                $row.data('total', newRowTot).find('.total').text(newRowTot)
                $tableTotal.trigger('changeTotal', [diff]);
                var tableTotalSum = $tableTotal.val();
                var percent = newRowTot * 100 / tableTotalSum;
                $rowPercent = $row.find('.percent')

                var percentage = percent.toFixed(2);
                $rowPercent.text(percentage);
                otherPercentage = 100 - percentage;
                $rowPercent.closest('table').find('.percent').not($rowPercent).text(otherPercentage .toFixed(2));
            });
        });

    })

    $tableTotal.data('total', total).val(total).on('changeTotal', function(e, rowDiff) {
        var currTotal = $(this).data('total') + rowDiff;
        $(this).data('total', currTotal).val(currTotal);
        return currTotal;

    })


});



function parseVals(val) {
    return (val != '') ? parseInt(val) : 0;
}

fiddle here http://jsfiddle.net/Mpayr/28/

EDIT - there was an error i corrected my code

EDIT- 2 one more edit to correct small glitches http://jsfiddle.net/Mpayr/30/

Upvotes: 1

Related Questions