JavaScript中的解析輸入

Question

我有一張學校卡片的表格。目的是顯示平均每個評分時段。數據來自數據庫，而平均結果來自javascript。當用戶輸入任何一個輸入字段，沿該列的平均值應動態更改或更新它。現在在我當前的代碼中，它會生成一個錯誤e.text（）不是一個函數。基本上，sum變量沒有從parseInt.Anyone有一個想法解決這個問題？

******抽樣結果******

Subject | Col1 |Col2 |Col3 |Col4 
    1   80 80 86 80  (80+80+86+80)/4 Note: not this way 
    2   86 85 86 81 
    3   80 87 85 86 

    Result  82 84 and so on.. 
    It should be: 
    (80+86+80)/3 number of rows 

view.blade.php

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

</tr> 
</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> 
<td class="ave" value="0"></td> 
</tr> 
     @endforeach 

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

這裏的JavaScript

$("input").on("keyup", function() { 
     $("tbody tr").each(function(index) { 
       var sum = 0; // The summation of all terms. 
       var card = 0; // Number of cells. 
       $(this).children('td').not(':first').each(function(i, e) { 
        card++; 
        sum+= parseInt(e.text().trim()); //this is the error 
       }); 
       var avg = sum/card; 
       console.log(avg); 
       $("#average td:nth-of-type("+index+")").html(avg); 
     }); 
}); 

Answer 1

爲我指出您通過tds循環，並得到text()而它上有沒有文字..它 有一個輸入，所以你需要得到的輸入值不是TD文本

所以你可以嘗試的東西這樣

我創建了一個功能row_sum()總結該行，column_sum()總結列，column_Average()度日行號列平均row_Average()由TD號碼來獲得行平均水平。

$(document).ready(function(){ 
 
    $("input").on("keyup", function() { 
 
    //row_sum();  // for sum row 
 
    //column_sum(); // for sum column 
 
    column_Average(); // for column average 
 
    row_Average(); // for row average 
 
    }).keyup(); // by adding .keyup() your code will run onload 
 
}); 
 

 

 

 
function column_sum(){ 
 
    var sum = []; // The summation of all terms. 
 
    $("tbody tr:not(#average)").each(function(index) { 
 
    var thisIt = $(this); 
 
     thisIt.find('td:not(.ave)').not(':first').each(function(i) { 
 
     var input_val = ($.trim($(this).find('input').val())) ? $(this).find('input').val().trim() : 0; 
 
     sum[i] ? sum[i] += parseInt(input_val) : sum.push(parseInt(input_val)); 
 
    }); 
 
    }); 
 
    $('#average td:not(:first)').each(function(i){ 
 
    $(this).text(sum[i]); 
 
    }); 
 
} 
 
function row_sum(){ 
 
    $("tbody tr:not(#average)").each(function(index) { 
 
    var thisIt = $(this); 
 
    var sum = 0; // The summation of all terms. 
 
    thisIt.find('td').not(':first').not(':last').each(function(i) { 
 
      var input_val = ($.trim($(this).find('input').val())) ? $(this).find('input').val().trim() : 0; 
 
      sum += parseInt(input_val); 
 
    }); 
 
    thisIt.find('td.ave').text(sum); 
 
    }); 
 
} 
 

 
function column_Average(){ 
 
    var sum = []; // The summation of all terms. 
 
    var tr_num = $("tbody tr:not(#average)").length; 
 
    $("tbody tr:not(#average)").each(function(index) { 
 
    var thisIt = $(this); 
 
     thisIt.find('td:not(.ave)').not(':first').each(function(i) { 
 
     var input_val = ($.trim($(this).find('input').val())) ? $(this).find('input').val().trim() : 0; 
 
     sum[i] ? sum[i] += parseInt(input_val) : sum.push(parseInt(input_val)); 
 
    }); 
 
    }); 
 
    $('#average td:not(:first)').each(function(i){ 
 
    $(this).text(sum[i]/tr_num); 
 
    }); 
 
} 
 

 

 
function row_Average(){ 
 
    $("tbody tr:not(#average)").each(function(index) { 
 
    var thisIt = $(this); 
 
    var sum = 0; // The summation of all terms. 
 
    var code = 0; thisIt.find('td').not(':first').not(':last').each(function(i) { 
 
      var input_val = ($.trim($(this).find('input').val())) ? $(this).find('input').val().trim() : 0; 
 
      code++; 
 
      sum += parseInt(input_val); 
 
    }); 
 
    thisIt.find('td.ave').text(sum/code); 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
<thead> 
 
<tr> 
 
    <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> 
 
    <th>Average</th> 
 
</tr> 
 
</thead> 
 
<tbody> 
 
<tr> 
 
<td colspan="3">Subject</td> 
 
<td colspan="2"><input type="text" name="term_1[]" value="12" class="form-control number-only"></td> 
 
<td colspan="2"><input type="text" name="term_2[]" value="13" class="form-control number-only"></td> 
 
<td colspan="2"><input type="text" name="term_3[]" value="14" class="form-control number-only"></td> 
 
<td colspan="2"><input type="text" name="term_4[]" value="15" class="form-control number-only"></td> 
 
<td class="ave" value="0"></td> 
 
</tr> 
 

 
<tr> 
 
<td colspan="3">Subject</td> 
 
<td colspan="2"><input type="text" name="term_1[]" value="120" class="form-control number-only"></td> 
 
<td colspan="2"><input type="text" name="term_2[]" value="130" class="form-control number-only"></td> 
 
<td colspan="2"><input type="text" name="term_3[]" value="140" class="form-control number-only"></td> 
 
<td colspan="2"><input type="text" name="term_4[]" value="150" class="form-control number-only"></td> 
 
<td class="ave" value="0"></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>