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

在这段代码中，我只能输入一个。如果列

Term4

的任何行有任何更改，则

Ave

的值为空。如何让它充满活力？我在这里需要帮助，因为在我找到这个脚本之前，我所有的代码都是逐段搜索的。我被困在这里好几天了。任何帮助都是福。这是我的第一个输入

样本表，输出1：

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

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

<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);

如果我在

术语4

中更改输入，则

ave

列将为空

样本表输出2：

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

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

<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);

HTML：

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

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

<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);

学习领域
第一学期
第二学期
第3学期
第4学期
大道
@foreach（$card['AllGrade']作为$subject）
{！！Form:：hidden（'grade_id[]，$subject['grade_id']）
{！！$subject->subject！！}
{！！$subject->term_1！！}
{！！$subject->term_2！！}
{！！$subject->term_3！！}
{！！Form:：text（'term_4[]，$subject->term_4，['class'=>'Form-control'，'name'=>'term_4'，'id'=>'term_4'，'value'=>''）
全部的
@endforeach
//javascript
$（“tbody tr”）。每个（函数（）{
var合计=0；
var-ave=0；
var计数=1；
$（this）.children（'td'）。not（'：first'）。not（'：last'）。each（function（）{
//“this”是循环中的当前元素
var number=（$（this.children（'input'）。length==0）？$（this.html（）：$（this.children（'input'）。first（）.val（）；
总数+=parseInt（数字）；
ave=总数/计数；
计数++；
});
if（“.form控件”）{
$（this）.on（'keyup'，'td:eq（4）input'，function（）{
$（'.form-control'）。打开（“输入”，函数（）{
var dInput=该值；
总计+=解析整数（dInput）；
ave=总数/计数-1；
});
控制台日志（ave）；
$（this.parent（）.next（）.html（ave）；
});
}   
$（this.children（'td'）.last（）.html（ave）；

为了避免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);
    }

---

对不起，表格，我无法编辑。注意：示例表格输出2：在值为85的Term4之后，Ave值为空。这是我所做的更改。第二次我在输入上做了更改，Ave列上没有发生任何事情。我正要编辑文章，但发布后没有编辑按钮。这应该是我想要的视图。T谢谢，先生。我真的不明白你在问什么，但我可以告诉你，

if（'.form control'）

将始终为真（因为

if（'any non-empty string'）

始终为真），并且从其他事件处理程序内部添加事件处理程序（即嵌套的

.on（）

调用）对于大多数问题来说，这通常不是正确的方法。@nnnnnnnn-Sir，请查看我的示例表，输出1：并与示例表输出2进行比较。Term4的值与数学主题内联，在第一个表中，该值为80，ave为82.4。但是当用户像在第二个表中一样改变主意时，如果用户将输入从80更改为85，则tave的值变为空白。这是为什么？用户可以编辑表的内容吗？而且在未处理的情况下更容易看到HTML。只需右键单击，

查看页面源代码

，然后复制HTML输出。更好的是，将其与javascript一起放入一个代码段，以便我们可以运行它。计算错误，可能是输入和count是错误的。我现在正在计算。我得到了正确的平均值。对不起，先生，这个代码是正确的。这只是因为我的右括号不匹配。最后你的答案是正确的。我想投票表决这个答案，但我的状态是不允许的。非常感谢你！！！！很高兴帮助：）在T.Shah-先生，我忘记了@endforeach之外的最后一个td，它保存了Ave列的总平均值。你能把逻辑加起来或插入javascript中吗？这里是缺少的html:total average Grade:{！！Form:：text（'scholar\GPA'，$card->scholar\GPA，['class'=>'form-control'，'name'=>'total ave'，'id'=>'total ave'，'value'=>''）