对 Codeigniter 动态行中的数据求和

Question

我在 codeigniter 的表单中有一个“添加更多”功能。我只是想显示一个运行总计，因为人们在每个添加的行中添加数据。

当您将数字添加到第一行时，一切正常，我输入的数字显示在“TOTALS”单元格中。

我的问题是，当我点击“添加更多”并将数据添加到其他行时，公式不会将所有行的数据相加。

但是...假设我单击“添加更多”3 次（总共有 4 行），如果我首先将数据放入新行...然后将数据添加到顶部（原始） row last ...THEN 公式将添加该列中所有单元格的数据。

示例添加更多表格

------------------------------------------------------------
| SUBCONTRACTOR | TOTAL TESTS | TOTAL DIAGNOSED | ADD MORE |
------------------------------------------------------------
| Entry 1       |    5        |      9          |  remove  |
------------------------------------------------------------
| Entry 2       |    3        |      1          |  remove  |
------------------------------------------------------------
| Entry 3       |    2        |      4          |  remove  |
------------------------------------------------------------
| TOTAL         |    10       |      14         |  remove  |
------------------------------------------------------------

添加列脚本

<script>
$(document).ready(function(){ 

$('[id^=nonclinsub]').on('keyup',function() {
            var total = 0;

            $('[id^=nonclinsub]').each(function(index){

                total += parseFloat($(this).val()?$(this).val():0);
            });
            
            var totalAll = $('#amt_nonclinsub_1').val(total.toFixed(0));
            
});

$('[id^=subdx]').on('keyup',function() {
            var total = 0;

            $('[id^=subdx]').each(function(index){

                total += parseFloat($(this).val()?$(this).val():0);
            });
            
            var totalAll = $('#amt_subdx_2').val(total.toFixed(0));
            
});


});
</script>

添加更多 HTML 和脚本

<!--SUBCONTRACTOR NON-CLINICAL SECTION -->


<h2 class="page-header">1b. Non-Clinical Subcontractors</h2>


            <div class="table-responsive">  
                <table class="table table-bordered" id="non_clin_sub" style="width:100%"> 
                  <tr>
                    <th width="65%">Sub-Contractor Name</th>
                    <th width="15%">Total Tests This Month</th>
                    <th width="15%">Total Diagnosed</th>
                    <th width="5%"> &nbsp; </th>
                  </tr>
                  
                  <!-- APPEND -->
                    <tr id="non_clin_calc">  
                          
                          
                        <td><select name="ncs[0][sub_name]" placeholder="" class="form-control name_list" >
                            <option value="NA">Choose</option>
                          
                          
        <?php $user_id = $this->session->userdata('user_id'); ?>
        <?php if($user_id == '3' || $user_id == '4' || $user_id == '48' || $user_id == '49' || $user_id == '50' || $user_id == '67'):?>
                          
                            <?php foreach($subcontractors_all as $subcontractor) : ?>
                                <option value="<?php echo $subcontractor->sub_name; ?>"><?php echo $subcontractor->sub_name; ?></option>
                           <?php endforeach; ?>
                      
      <?php else:?>
                            <?php foreach($subcontractors as $subcontractor) : ?>
                                <option value="<?php echo $subcontractor->sub_name; ?>"><?php echo $subcontractor->sub_name; ?></option>
                           <?php endforeach; ?>
      <?php endif;?>
                          </select></td>

      
                      
                      
                        <td><input type="number" id="nonclinsub[0]_1" name="ncs[0][sub_tests]" placeholder="" class="form-control name_list amount_non_clin"  /></td>
                        <td><input type="number" id="subdx[0]_1" name="ncs[0][sub_dx]" placeholder="" class="form-control name_list amount_non_clin_dx"  /></td>
                      
                        <td><button type="button" name="add_ncs" id="add_ncs" class="btn btn-success">Add More</button></td>  
                    </tr>  
                  <!-- APPEND -->
                  
                </table>  
              
              <table class="table table-bordered" style="width:100%">
                  
                  
                    <tr>
                         <td width="64%">
                           <strong><span class="form-control name_list">TOTAL</span></strong>
                         </td>
                      
                         <td width="15%">
                             <input type="text" class="form-control name_list" value="0" name="total_ncs_1" id="amt_nonclinsub_1" readonly="readonly">
                         </td>
                      
                        <td width="15%">
                             <input type="text" class="form-control name_list" value="0" name="total_sdx_2" id="amt_subdx_2" readonly="readonly">

                        </td>
                        
                      <td width="6%"><span class="form-control name_list"> &nbsp; </span></td> 
                      
                    </tr>
              </table>
              
            </div>
                  <!-- END DIV CLASS TABLE RESPONSIVE -->

<script type="text/javascript">
    $(document).ready(function(){      
      var i=1;  
   
      $('#add_ncs').click(function(){  
           i++;  
           $('#non_clin_sub').append('<tr id="add_ncs-row'+i+'" class="dynamic-added"><td><select name="ncs['+i+'][sub_name]" placeholder="" class="form-control name_list" ><option value="NA">Choose</option><?php $user_id = $this->session->userdata('user_id'); ?><?php if($user_id == '3' || $user_id == '4' || $user_id == '48' || $user_id == '49' || $user_id == '50' || $user_id == '67'):?><?php foreach($subcontractors_all as $subcontractor) : ?><option value="<?php echo $subcontractor->sub_name; ?>"><?php echo $subcontractor->sub_name; ?></option><?php endforeach; ?><?php else:?><?php foreach($subcontractors as $subcontractor) : ?><option value="<?php echo $subcontractor->sub_name; ?>"><?php echo $subcontractor->sub_name; ?></option><?php endforeach; ?><?php endif;?></select></td> <td><input type="number" id="nonclinsub['+i+']_1" name="ncs['+i+'][sub_tests]" placeholder="" class="form-control name_list amount_non_clin"  /></td> <td><input type="number" id="subdx['+i+']_1" name="ncs['+i+'][sub_dx]" placeholder="" class="form-control name_list amount_non_clin_dx"  /></td> <td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td> </tr>');  
      });
  
      $(document).on('click', '#non_clin_sub .btn_remove', function(){  
           var button_id = $(this).attr("id");   
           $('#add_ncs-row'+button_id+'').remove();  
      });  
  
    });  
</script>

Answer 1

您只需要使用event delegation。将事件放在静态容器上，例如表#non_clin_sub，并将其委托给任何匹配的选择器，例如[id^=nonclinsub]。

$(document).ready(function() {
  $('#non_clin_sub').on('keyup', '[id^=nonclinsub]', function() {
    var total = 0;
    $('[id^=nonclinsub]').each(function(index) {
     total += parseFloat($(this).val() ? $(this).val() : 0);
    });
    $('#amt_nonclinsub_1').val(total.toFixed(0));
  });

  $('#non_clin_sub').on('keyup', '[id^=subdx]', function() {
    var total = 0;
    $('[id^=subdx]').each(function(index) {
      total += parseFloat($(this).val() ? $(this).val() : 0);
    });
    $('#amt_subdx_2').val(total.toFixed(0));
  });
});