如何平均數字並動態顯示結果

我想平均來自四（4）個輸入字段（最小值爲0，最大值爲100）的數字，並立即動態顯示結果（即不重新加載頁面）任何字段都被填充。然後在最後一列中，對於也是動態的等級。應顯示A的值爲80至100，藍色的單元格，B的值爲60至80，綠色的單元格等等。但等級不起作用。我也想使用ajax動態地將數據輸入到數據庫中，但我不知道如何去做。以下是我所想到的。提前致謝。下面是代碼如何平均數字並動態顯示結果

$('#input1').keyup(function() { 
 
    evaluate(); 
 
}); 
 
$('#input2').keyup(function() { 
 
    evaluate(); 
 
}); 
 
$('#input3').keyup(function() { 
 
    evaluate(); 
 
}); 
 
$('#input4').keyup(function() { 
 
    evaluate(); 
 
}); 
 

 
var evaluate = function() { 
 
    var input1 = parseInt($('#input1').val()); 
 
    var input2 = parseInt($('#input2').val()); 
 
    var input3 = parseInt($('#input3').val()); 
 
    var input4 = parseInt($('#input4').val()); 
 

 
    if (isNaN(input1) || isNaN(input2) || isNaN(input3) || isNaN(input4)) { 
 
    $('#error').text('Inputs must be numbers'); 
 
    } else { 
 
    var ave = (input1 + input2 + input3 + input4)/4; 
 
    $('#total').text(input1 + input2 + input3 + input4); 
 
    $('#ave').text(ave); 
 

 
    switch (ave) { 
 
     case 100 <= ave >= 80: 
 
     $('#grade').text('<div bgcolor="blue">A</div>'); 
 
     break; 
 
     case 80 <ave>= 60: 
 
     $('#grade').text('<div bgcolor="green">B</div>'); 
 
     break; 
 
     case 60 <ave>= 40: 
 
     $('#grade').text('<div bgcolor="yellow">C</div>'); 
 
     break; 
 
     case 40 <ave>= 20: 
 
     $('#grade').text('<div bgcolor="red">D</div>'); 
 
     break; 
 
     case 20 <ave>= 0: 
 
     $('#grade').text('<div bgcolor="green">E</div>'); 
 
     break; 
 
     default: 
 
     $('#grade').text('<div>--</div>'); 
 
    } 
 
    } 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <th>Input 1</th> 
 
    <th>Input 2</th> 
 
    <th>Input 3</th> 
 
    <th>Input 4</th> 
 
    <th>Total</th> 
 
    <th>Average</th> 
 
    <th>Grade</th> 
 
    </tr> 
 

 
    <tr> 
 
    <td> 
 
     <input id="input1" name="input1" size="1px" /> 
 
    </td> 
 
    <td> 
 
     <input id="input2" name="input2" size="1px" /> 
 
    </td> 
 
    <td> 
 
     <input id="input3" name="input3" size="1px" /> 
 
    </td> 
 
    <td> 
 
     <input id="input4" name="input4" size="1px" /> 
 
    </td> 
 
    <td id="total"></td> 
 
    <td id="ave"></td> 
 
    <td id="grade"></td> 
 
    </tr> 
 
</table> 
 
<div id="error"></div>

來源

2015-07-19 Flourish

您使用的檢查avg比較不換言之由JavaScript，支持，你不能這樣做0 > avg > 1。 Here's more on that matter.

下面是你想要實現的一個工作示例。

更新： 這是一個Fiddle具有相同的腳本與所有的值準備保存。

$(function() { 
 
    function evaluate() { 
 
    var input1 = parseInt($('#input1').val(), 10); 
 
    var input2 = parseInt($('#input2').val(), 10); 
 
    var input3 = parseInt($('#input3').val(), 10); 
 
    var input4 = parseInt($('#input4').val(), 10); 
 

 
    if (isNaN(input1) || isNaN(input2) || isNaN(input3) || isNaN(input4)) { 
 
     $('#error').text('Inputs must be numbers'); 
 
    } else { 
 

 
     $('#error').remove(); 
 

 
     var message = '<div>--</div>', 
 
     ave = (input1 + input2 + input3 + input4)/4; 
 
     $('#total').text(input1 + input2 + input3 + input4); 
 
     $('#ave').text(ave); 
 

 
     if (ave >= 80) { 
 
     message = '<div class="blue">A</div>'; 
 
     } else if (80 > ave && ave >= 60) { 
 
     message = '<div class="green">B</div>'; 
 
     } else if (60 > ave && ave >= 40) { 
 
     message = '<div class="yellow">C</div>'; 
 
     } else if (40 > ave && ave >= 20) { 
 
     message = '<div class="red">D</div>'; 
 
     } else if (20 > ave && ave >= 0) { 
 
     message = '<div class="green">E</div>'; 
 
     } 
 

 
     $('#grade').empty().html(message); 
 
    } 
 
    }; 
 

 
    $('.input').on('change', evaluate); 
 
});

input { 
 
    max-width: 50px; 
 
} 
 
table td { 
 
    padding: 0 10px; 
 
} 
 
.blue { 
 
    background: blue; 
 
} 
 
.green { 
 
    background: green; 
 
} 
 
.yellow { 
 
    background: yellow; 
 
} 
 
.red { 
 
    background: blue; 
 
}

<link href="http://meyerweb.com/eric/tools/css/reset/reset.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <th>Input 1</th> 
 
    <th>Input 2</th> 
 
    <th>Input 3</th> 
 
    <th>Input 4</th> 
 
    <th>Total</th> 
 
    <th>Average</th> 
 
    <th>Grade</th> 
 
    </tr> 
 

 
    <tr> 
 
    <td> 
 
     <input id="input1" class="input" type="number" value="0" name="input1"> 
 
    </td> 
 
    <td> 
 
     <input id="input2" class="input" type="number" value="0" name="input2"> 
 
    </td> 
 
    <td> 
 
     <input id="input3" class="input" type="number" value="0" name="input3" /> 
 
    </td> 
 
    <td> 
 
     <input id="input4" class="input" type="number" value="0" name="input4"> 
 
    </td> 
 
    <td id="total"></td> 
 
    <td id="ave"></td> 
 
    <td id="grade"></td> 
 
    </tr> 
 
</table> 
 
<div id="error"></div>

來源

2015-07-19 14:10:31 halfzebra

由於它的工作。但是，當我嘗試應用表格時，在while循環中從數據庫表中獲取學生行時，它不起作用。每個輸入字段都使用數組插入到數據庫中。我試圖計算最後三列中的總數，平均數和總數，但不起作用。 – Flourish

@ user3636615我已經發布了一個[小提琴]（http://jsfiddle.net/3p5htb0b/1/）與腳本的更新版本，請檢查出來。更新後的版本支持動態輸入量。 – halfzebra

Kkkk ...我查過了，我看到了更新。但我試圖應用到表中將行從數據庫中提取。所以每個學生都會有他/她的排。名稱是每個輸入字段是類似於exe []，但它們都具有相同的id，因爲行是循環while循環。 – Flourish

如果你總結的值是正確的，我想你所做的一切，改變你的switch了這一點。

 switch(ave) { 
     case 100 <= ave >= 80 : 
      $('#grade').css('background',"green").text('B');  
     break; 
     //SIMILAR FOR OTHER CASES 
    }

來源

2015-07-19 12:57:09 Varun

如何平均數字並動態顯示結果

回答

相關問題