Question

我有这个当前脚本来计算平均列但我无法从输入中获取值。代码只访问中的内容 td。

任何人都可以告诉我为什么结果是NaN？

我曾尝试将值放在td中并且它没问题，但我需要该值   在输入类型内。如何访问输入中的值？

此表是一个更新表单，这就是输入字段的原因。

另外如何在所有输入字段中添加keyup事件？

示例输出

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

HTML

<div class="table table-responsive table-bordered">
  <table class="table">
    <thead>


      <th colspan="3">Subjects</th>
      <th colspan="2">First Grading</th>
      <th colspan="2">Second Grading</th>
      <th colspan="2">Third Grading</th>
      <th colspan="2">Fourth Grading</th>


    </thead>
    <tbody>
      @foreach($update_card['AllGrade'] as $subject) {!! Form::hidden('grade_id[]',$subject['grade_id']) !!}
      <tr>
        <td colspan="3">{!! $subject->subject !!}</td>
        <td colspan="2"><input type="text" name="term_1[]" value="{!! $subject->term_1 !!}" class="form-control number-only"></td>
        <td colspan="2"><input type="text" name="term_2[]" value="{!! $subject->term_2 !!}" class="form-control number-only"></td>
        <td colspan="2"><input type="text" name="term_3[]" value="{!! $subject->term_3 !!}" class="form-control number-only"></td>
        <td colspan="2"><input type="text" name="term_4[]" value="{!! $subject->term_4 !!}" class="form-control number-only"></td>

      </tr>

      @endforeach
      <tr id="average">
        <td colspan="2">Average</td>
        <td colspan="2">0</td>
        <td colspan="2">0</td>
        <td colspan="2">0</td>
        <td colspan="2">0</td>
      </tr>
    </tbody>

  </table>

脚本

$(document).ready(function(){

 $("#average td").each(function(k,v){
   debugger;
      if(k>0){
      $sum=0;
      $row = $(this).closest("table").find("tr");    
      $($row).each(function(key,val){
        if(key>0 && key<$row.length-1){
          $sum+=parseInt($($(this).find("td")[k]).text());      
        }
      })

      $(this).text($sum/($row.length-2));
      }

 })

});

Answer 1

平均计算的简化版本：

＆＃13;

$('.table :input').on('input', function(e) {
    var cellIdx = $(this).closest('td').index() + 1;
    var currAvgCell = $("#average td:nth-child(" + cellIdx + ")").get(0);
    var cellsInput = $(this).closest("table tbody").find("tr:not(:last) td:nth-child(" + cellIdx + ") :input");

    // reset value
    currAvgCell.textContent = '0';
    cellsInput.each(function (key, r) {
        currAvgCell.textContent = +r.value + +currAvgCell.textContent;
    });

    currAvgCell.textContent = +currAvgCell.textContent / +cellsInput.length;
});
// comput at dom ready each average
$('.table tbody tr:first :input').trigger('input');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="table table-responsive table-bordered">
    <table class="table">
        <thead>
        <th colspan="3">Subjects</th>
        <th colspan="2">First Grading</th>
        <th colspan="2">Second Grading</th>
        <th colspan="2">Third Grading</th>
        <th colspan="2">Fourth Grading</th>
        </thead>
        <tbody>
        <tr>
            <td colspan="3">Math</td>
            <td colspan="2"><input type="text" name="term_1[]" value="81"
                                   class="form-control number-only"></td>
            <td colspan="2"><input type="text" name="term_2[]" value="87"
                                   class="form-control number-only"></td>
            <td colspan="2"><input type="text" name="term_3[]" value="81"
                                   class="form-control number-only"></td>
            <td colspan="2"><input type="text" name="term_4[]" value="80"
                                   class="form-control number-only"></td>
        </tr>
        <tr>
            <td colspan="3">Science</td>
            <td colspan="2"><input type="text" name="term_1[]" value="89"
                                   class="form-control number-only"></td>
            <td colspan="2"><input type="text" name="term_2[]" value="83"
                                   class="form-control number-only"></td>
            <td colspan="2"><input type="text" name="term_3[]" value="81"
                                   class="form-control number-only"></td>
            <td colspan="2"><input type="text" name="term_4[]" value="80"
                                   class="form-control number-only"></td>
        </tr>
        <tr id="average">
            <td colspan="3">Average</td>
            <td colspan="2">0</td>
            <td colspan="2">0</td>
            <td colspan="2">0</td>
            <td colspan="2">0</td>
        </tr>
        </tbody>
    </table>
</div>

＆＃13;

Answer 2

在您的代码中，$($(this).find("td")[k]).text()获取表格单元格的文本值。为了获得input内部的值，您需要编写$(this).find("td").eq(k).find('input').val()。

此外，您可以向元素添加全局事件，如下所示：

$('table').on('keyup', 'td input', callback)

它会在input内table td内调用该事件，即使它是动态创建的。

使用javascript从html TD标记中的输入字段获取值

2 个答案: