jQuery / Javascript | HTML表總和上一個TD的同一個TD的總記錄

Question

我正在嘗試基於該行中同級的總和來更新最后一個。

單擊時，表TD的類為contenteditable = "TRUE" 。

所以我正在嘗試當有人嘗試更新該td列上的數字時，它也應該更新該行中的最后一個。

這是我現在擺在桌子上的小提琴。

JS FIDDLE LINK HERE

Answer 1

您需要為.inner class添加keyup（）事件 ，例如，

$('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);
});

同樣在我的演示中，我添加了一個類.total來顯示所有內部類的總數。 觀看現場演示

Answer 2

您可以計算出已編輯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/

Answer 3

檢查你的js小提琴鏈接

 $('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);

        });