如何对这个动态创建的表中的每一列求和，如 excel

Question

我会尽力解释我目前的问题。我创建了一个视图，类似于 excel。它是动态创建的。（见下文）  A     B       C| 1|   | 3|   | 7|       // The input format is `<input type='text' class='inputitem' id='colA_row1' />`| 2|   | 6|   | 8|       // The `id` of this `inputitem`is defined by the number of columns and rows automatically| 9|   | 7|   | 4||12|   |16|   |19|       // The format of total textbox is `<input type='text' class='totalitem' id='total_colA' />                                    //// The `id` of this `totalitem` is defined by the number of column automatically用户可以对any输入任意数字，inputitem并将其值totalitem调整为每列值的总和。（例如，如果用户将 A 列第 2 行的值更改为 9，则totalcolumnA 列的值将更改为 19）这是我当前的 jquery 代码：$('.inputitem').on('keyup', function(){        var _inputitem      = $(this);                    var _inputitem_arr  = $(this).attr('id').split('_');        var _inputitem_col  = _inputitem_arr[0];        var _inputitem_row  = _inputitem_arr[1];                    /*SUM SCRIPT*/        var sum_item = 0;        $('.inputitem').each(function(i){            var inputitem_val = parseFloat($(this).val().replace(',', ''));            $('.totalitem').each(function(i){                var _totalitem      = $(this);                var _totalitem_arr  = $(this).attr('id').split('_');                var _totalitem_col  = _totalitem_arr[1];                                                   if(_inputitem_col == _totalitem_col){                        sum_item = sum_item + inputitem_val;                        _totalitem.val(sum_item);                }            });        });             /*END SUM SCRIPT*/});我当前的脚本给出了错误的总项目值。似乎将不同列的 SUM 添加到公式中。非常感谢任何帮助和建议

Answer 1

想想这段代码的流程。当用户在页面上具有“输入项”类的任何输入元素上完成按键（keyup 事件）时，您的最外层函数就会执行。到现在为止还挺好。

您将总和初始化为 0，然后调用 $('.inputitem').each(function(i){

此调用意味着对于页面上具有“输入项”类的每个元素，您将在内部函数中运行整个脚本。因此，对于第一个 inputitem（可能是左上角的那个，可能不是），我们在 inputitem_val 中得到值 1.0。

这就是麻烦真正开始的地方。接下来，您为所有单元格调用 each 函数。但这是一个嵌套调用。因此，您正在为外部每个循环的 9 个（或许多）单元中的每一个重新执行最内部的功能。这是一个取消嵌套函数的修复：

$('.inputitem').on('keyup', function(){

    var _inputitem      = $(this);            

    var _inputitem_arr  = $(this).attr('id').split('_');

    var _inputitem_col  = _inputitem_arr[0];

    //whichever column this cell is in is the column we need to re-sum

    var active_col = _inputitem_col

    /*SUM SCRIPT*/

    var sum_item = 0;

    //iterate through each input cell

    $('.inputitem').each(function(i){

        var _inputitem      = $(this);            

        var _inputitem_arr  = $(this).attr('id').split('_');

        var _inputitem_col  = _inputitem_arr[0];

        //check whether the current input cell is in the active column

        if(_inputitem_col == active_col){

            //if so, add it to our partial sum

            var inputitem_val = parseFloat($(this).val().replace(',', ''));

            sum_item += inputitem_val;

        }

    });     

    //find and update only the relavent sum cell

    $('.totalitem').each(function(i){

        var _totalitem      = $(this);

        var _totalitem_arr  = $(this).attr('id').split('_');

        var _totalitem_col  = _totalitem_arr[1];                                   

        if(_inputitem_col == _totalitem_col){

            _totalitem.val(sum_item);

        }

    });

    /*END SUM SCRIPT*/

});

Answer 2

$('.inputitem').on('keyup', function(){

    var _inputitem_arr  = $(this).attr('id').split('_');

    var _inputitem_col  = _inputitem_arr[0];

    var $totlaSelector  = '#total_' + _inputitem_col;

    var $ColTotal = 0;

    $('[id^="'+_inputitem_col+'"]').each(function(i){

       var $thisVal = 0;

       if($(this).val() != ''){

        $thisVal = parseInt($(this).val());

       }

       $ColTotal = $ColTotal + $thisVal;

    });

    $($totlaSelector).val($ColTotal);

});

我已经在 keyup 事件上更新了你的 jQuery。