如何对这个动态创建的表中的每一列求和，如 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(){&nbsp; &nbsp; var _inputitem&nbsp; &nbsp; &nbsp; = $(this);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; var _inputitem_arr&nbsp; = $(this).attr('id').split('_');&nbsp; &nbsp; var _inputitem_col&nbsp; = _inputitem_arr[0];&nbsp; &nbsp; //whichever column this cell is in is the column we need to re-sum&nbsp; &nbsp; var active_col = _inputitem_col&nbsp; &nbsp; /*SUM SCRIPT*/&nbsp; &nbsp; var sum_item = 0;&nbsp; &nbsp; //iterate through each input cell&nbsp; &nbsp; $('.inputitem').each(function(i){&nbsp; &nbsp; &nbsp; &nbsp; var _inputitem&nbsp; &nbsp; &nbsp; = $(this);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; var _inputitem_arr&nbsp; = $(this).attr('id').split('_');&nbsp; &nbsp; &nbsp; &nbsp; var _inputitem_col&nbsp; = _inputitem_arr[0];&nbsp; &nbsp; &nbsp; &nbsp; //check whether the current input cell is in the active column&nbsp; &nbsp; &nbsp; &nbsp; if(_inputitem_col == active_col){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //if so, add it to our partial sum&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var inputitem_val = parseFloat($(this).val().replace(',', ''));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sum_item += inputitem_val;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; //find and update only the relavent sum cell&nbsp; &nbsp; $('.totalitem').each(function(i){&nbsp; &nbsp; &nbsp; &nbsp; var _totalitem&nbsp; &nbsp; &nbsp; = $(this);&nbsp; &nbsp; &nbsp; &nbsp; var _totalitem_arr&nbsp; = $(this).attr('id').split('_');&nbsp; &nbsp; &nbsp; &nbsp; var _totalitem_col&nbsp; = _totalitem_arr[1];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; if(_inputitem_col == _totalitem_col){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _totalitem.val(sum_item);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; &nbsp; /*END SUM SCRIPT*/});

Answer 2

$('.inputitem').on('keyup', function(){&nbsp; &nbsp; var _inputitem_arr&nbsp; = $(this).attr('id').split('_');&nbsp; &nbsp; var _inputitem_col&nbsp; = _inputitem_arr[0];&nbsp; &nbsp; var $totlaSelector&nbsp; = '#total_' + _inputitem_col;&nbsp; &nbsp; var $ColTotal = 0;&nbsp; &nbsp; $('[id^="'+_inputitem_col+'"]').each(function(i){&nbsp; &nbsp; &nbsp; &nbsp;var $thisVal = 0;&nbsp; &nbsp; &nbsp; &nbsp;if($(this).val() != ''){&nbsp; &nbsp; &nbsp; &nbsp; $thisVal = parseInt($(this).val());&nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp;$ColTotal = $ColTotal + $thisVal;&nbsp; &nbsp; });&nbsp; &nbsp; $($totlaSelector).val($ColTotal);});我已经在 keyup 事件上更新了你的 jQuery。