CODEWITHSUNDEEP
javascriptjqueryhtml
Sizzling Code
Sizzling Code

Reputation: 6070

Jquery/Javascript | HTML Table Sum Total Records of sibling TD in last TD

I am Trying to Update the Last based on the sum of sibling in that row..

The Table TD has class contenteditable = "TRUE" when clicked.

so i am trying when someone try to update the digit on that td column it should also update the last in that row.

Here is the Fiddle of the Table i have now..

JS FIDDLE LINK HERE

Upvotes: 0

Views: 304

Answers (3)

seung-uk
seung-uk

Reputation: 36

check your js fiddle link

 $('tr.tableRow td.inner').on('click',function(e){
            e.preventDefault();
            e.stopImmediatePropagation();

            $(this).attr('contentEditable','true');
            $(this).addClass('inputCopyCat');
            $(this).focus();
        });
        $('tr.tableRow td.inner').focusout(function(e){
            $('td.inputCopyCat').removeAttr('contentEditable');
            $('td.inputCopyCat').removeClass('inputCopyCat');

            var currentTableRow = $(this).parent();
            var currentTabelRowSum = 0;

            currentTableRow.find('td.inner:not(:last)').each(function() {
                var userInput = parseInt(this.innerText);

                if(!isNaN(userInput)) {
                    currentTabelRowSum += parseInt(this.innerText);
                }
            });

            currentTableRow.find('td.inner:last').text(currentTabelRowSum);

        });

Upvotes: 0

Sridhar Narasimhan
Sridhar Narasimhan

Reputation: 2653

You can calculate on blur of edited TD 

$('tr.tableRow td.inner').on('blur',function(e){

    var sumTD =  $(this).parent().find("td:last");
    sumTD.text(parseInt(sumTD.text())+ parseInt($(this).text()));

        });

http://jsfiddle.net/yhjw23of/9/

Upvotes: 0

Rohan Kumar
Rohan Kumar

Reputation: 40639

You need to add keyup() event for .inner class like,

$('tr.tableRow td.inner').on('keyup',function(){
    $tr=$(this).closest('tr');
    var sum=0;
    $tr.find('td.inner:not(.total)').each(function(){
        sum += Number($(this).text());
    });
    $tr.find('.total').text(sum);
});

Also in my demo I added a class .total to show the total of all inner class. See the Live demo

Upvotes: 1

Related Questions