javascriptを使用してhtml TDタグ内の入力フィールドから値を取得する

Question

私はこの現在のスクリプトを列平均計算に使用していますが、I は入力から値を取得できません。コードは、 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

あなたの平均の計算を簡略化したバージョン：すべての入力フィールドにkeyUpイベントを追加する方法を

$('.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');

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

Answer 2

であなたのコードは、$($(this).find("td")[k]).text()は、テーブルのセルのテキスト値を取得します。内部にinputの価値を得るためには、$(this).find("td").eq(k).find('input').val()と書く必要があります。

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

それは、それが動的に作成された場合でも、table td内部のすべてのinputにイベントを呼び出すつもりだ：

また、あなたはそうのように、要素にグローバルイベントを追加することができます。