Question

在这段代码中，我只能输入一些。如果列Term4的任何行发生任何更改，则Ave的值为空。如何让它充满活力？我需要帮助，因为我的所有代码都只是逐个搜索，直到我想出这个脚本。我被困在这里好几天了。任何帮助都将是一种祝福。这是我的第一个输入......

示例表，输出1 ：

Subject | Term1 | Term2 | Term3 | Term4 |   Ave  
   Math      81      87      81      80    82.4 
Science      89      83      81      80    83.25

如果我更改term 4中的输入，ave列将为空白。

样本表输出2 ：

Subject | Term1 | Term2 | Term3 | Term4 | Ave 
   Math      81      87      81      85     
Science      89      83      81      80   83.25

HTML ：

<tr>                 
     <th colspan="3">Learning Areas</th>
     <th colspan="2">Term 1</th>
     <th colspan="2">Term 2</th>
     <th colspan="2">Term 3</th>
     <th colspan="2">Term 4</th>
     <th>Ave</th>
  </tr>
</thead>
<tbody>
          @foreach($card['AllGrade'] as $subject)
          {!! Form::hidden('grade_id[]',$subject['grade_id']) !!} 
    <tr>
      <td colspan="3">{!! $subject->subject !!}</td>
      <td colspan="2">{!! $subject->term_1 !!}</td>
      <td colspan="2">{!! $subject->term_2 !!}</td>
      <td colspan="2">{!! $subject->term_3 !!}</td>
      <td colspan="2">{!! Form::text('term_4[]',$subject->term_4,['class'=>'form-control','name'=>'term_4','id'=>'term_4','value'=>'']) !!}</td>

    <td colspan="2" class="aver" name ="ave" id ="ave" value=""> total</td>

         </tr>
      @endforeach


//javascript
<script type="text/javascript">
$("tbody tr").each(function() {
    var total = 0;
    var ave = 0;
    var count = 1;


        $(this).children('td').not(':first').not(':last').each(function () {
        //"this" is the current element in the loop

        var number = ($(this).children('input').length == 0) ? $(this).html() : $(this).children('input').first().val();

        total += parseInt(number);
        ave = total/count;
        count++;
});


    if('.form-control'){
        $(this).on('keyup', 'td:eq( 4 ) input', function(){
             $('.form-control').on("input", function() {
                var dInput = this.value;
                total += parseInt(dInput);

                 ave = total/count-1; 

             });

           console.log(ave);
          $(this).parent().next().html(ave);

     });
    }   

      $(this).children('td').last().html(ave);

Answer 1

为了避免NaN问题，我确保将更改的输入视为0.然后重新计算平均值，然后它就可以了。

            $("tbody tr").each(function() {
            var total = 0;
            var ave = 0;
            var count = 1;


                $(this).children('td').not(':first').not(':last').each(function () {
                //"this" is the current element in the loop

                var number = ($(this).children('input').length == 0) ? $(this).html() : $(this).children('input').first().val();

                total += parseInt(number);
                ave = total/count;
                count++;
                });


              $(this).children('td').last().html(ave);


              if('.form-control'){
                $(this).on('keyup', 'td:eq( 4 ) input', function(){
                     $('.form-control').on("input", function() {
                        var dInput = parseInt(this.value);
                        if(!dInput || dInput === NaN) {
                            dInput = 0;
                        }

                    var total = 0;

                    var count = 1;
                    $(this).parent().siblings().not(':first').not(':last').each(function () { 

                    //"this" is the current element in the loop
                    var number = $(this).html();
                    total += parseInt(number);
                    count++;

                    });

                    total += dInput;
                    console.log(total);
                    console.log(count);
                    var ave = total/count; 

                    //console.log(ave);
                    $(this).parent().siblings(":last").html(ave);

                    calcTotalave();
                     });

             });
            } 

    });
    calcTotalave();
    // calculate total average
    function calcTotalave() {
        var totalAve = 0;
        $( ".aver" ).each(function() {
            console.log($(this).html());
            var thisAve = parseFloat($(this).html());
            if(!thisAve || thisAve === NaN) {
                thisAve = 0;
            }                

            totalAve += thisAve;

        });
        console.log(totalAve);
        $("#total-ave").val(totalAve);
    }

使用javascript在同一文本字段中多次输入

1 个答案: