如何总结jQuery输出 [英] How to sum Jquery Outputs
本文介绍了如何总结jQuery输出的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我创建了两行，并将一些数据相乘以获得总计:
但是我不确定如何将所有总计加起来并将其打印在现金"行中.
以下是我的代码:
<script type="text/javascript">
$(document).ready(function() {
$('.row1').keyup(function(ev){
var row1c = $(this).val() * 1000;
$('.row1c').html((row1c).toFixed(2));
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.row2').keyup(function(ev){
var row2c = $(this).val() * 500;
$('.row2c').html((row2c).toFixed(2));
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.row3').keyup(function(ev){
var row3c = $(this).val() * 100;
$('.row3c').html((row3c).toFixed(2));
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.row4').keyup(function(ev){
var row4c = $(this).val() * 50;
$('.row4c').html((row4c).toFixed(2));
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.row5').keyup(function(ev){
var row5c = (row1c+row2c+row3c+row4c);
$('.row5c').html((row5c).toFixed(2));
});
});
</script>
<table border="2" cellpadding="5" cellspacing="2" align="center">
<h3 align="center">Cash Position as on...... </h3>
<tr>
<th>Note</th>
<th>Quantity</th>
<th>Total</th>
</tr>
<tr>
<td>1000 Tk Note</td>
<td><input type="text" name="pages" class="row1" /></td>
<td><span class="row1c">0.00</span></td>
</tr>
<tr>
<td>500 Tk Note</td>
<td><input type="text" name="pages" class="row2" /></td>
<td><span class="row2c">0.00</span></td>
</tr>
<tr>
<td>100 Tk Note</td>
<td><input type="text" name="pages" class="row3" /></td>
<td><span class="row3c">0.00</span></td>
</tr>
<tr>
<td>50 Tk Note</td>
<td><input type="text" name="pages" class="row4" /></td>
<td><span class="row4c">0.00</span></td>
</tr>
<tr>
<td colspan ="2">Cash In Hand (Sum of All Totals)</td>
<td><span class="row5c">0.00</span></td>
</tr>
</table>
所有代码都在这里
https://jsfiddle.net/rashelmiah/fb9opo36/1/
您能不能请我找到一种将所有总数相加的方法? 预先感谢.
解决方案
您需要添加以下代码.
$('input[type=text]').keyup(function(){
var total = 0;
$('input[type=text]').each(function(){
total += Number($(this).parent().next().find('span').text());
})
$('.row5c').text(total);
})
注意:您的代码中有很多<script>标记，这些标记是不必要的.还有很多ready()功能，这也是不必要的.您可以将整个代码包装在一个<script>标签和一个ready()函数中.
演示:
$(document).ready(function() {
$('.row1').keyup(function(ev){
var row1c = $(this).val() * 1000;
$('.row1c').html((row1c).toFixed(2));
});
$('.row2').keyup(function(ev){
var row2c = $(this).val() * 500;
$('.row2c').html((row2c).toFixed(2));
});
$('.row3').keyup(function(ev){
var row3c = $(this).val() * 100;
$('.row3c').html((row3c).toFixed(2));
});
$('.row4').keyup(function(ev){
var row4c = $(this).val() * 50;
$('.row4c').html((row4c).toFixed(2));
});
$('.row5').keyup(function(ev){
var row5c = (row1c+row2c+row3c+row4c);
$('.row5c').html((row5c).toFixed(2));
});
$('input[type=text]').keyup(function(){
var total = 0;
$('input[type=text]').each(function(){
total += Number($(this).parent().next().find('span').text());
})
$('.row5c').text(total.toFixed(2));
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="2" cellpadding="5" cellspacing="2" align="center">
<h3 align="center">Cash Position as on...... </h3>
<tr>
<th>Note</th>
<th>Quantity</th>
<th>Total</th>
</tr>
<tr>
<td>1000 Tk Note</td>
<td>
<input type="text" name="pages" class="row1" />
</td>
<td><span class="row1c">0.00</span>
</td>
</tr>
<tr>
<td>500 Tk Note</td>
<td>
<input type="text" name="pages" class="row2" />
</td>
<td><span class="row2c">0.00</span>
</td>
</tr>
<tr>
<td>100 Tk Note</td>
<td>
<input type="text" name="pages" class="row3" />
</td>
<td><span class="row3c">0.00</span>
</td>
</tr>
<tr>
<td>50 Tk Note</td>
<td>
<input type="text" name="pages" class="row4" />
</td>
<td><span class="row4c">0.00</span>
</td>
</tr>
<tr>
<td colspan="2">Cash In Hand (Sum of All Totals)</td>
<td><span class="row5c">0.00</span>
</td>
</tr>
</table>
I created couple of rows and multiplied some data to get totals:
But I am not sure how to sum all the totals and print it in "Cash in Hand" row.
Following are my codes:
<script type="text/javascript">
$(document).ready(function() {
$('.row1').keyup(function(ev){
var row1c = $(this).val() * 1000;
$('.row1c').html((row1c).toFixed(2));
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.row2').keyup(function(ev){
var row2c = $(this).val() * 500;
$('.row2c').html((row2c).toFixed(2));
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.row3').keyup(function(ev){
var row3c = $(this).val() * 100;
$('.row3c').html((row3c).toFixed(2));
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.row4').keyup(function(ev){
var row4c = $(this).val() * 50;
$('.row4c').html((row4c).toFixed(2));
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.row5').keyup(function(ev){
var row5c = (row1c+row2c+row3c+row4c);
$('.row5c').html((row5c).toFixed(2));
});
});
</script>
<table border="2" cellpadding="5" cellspacing="2" align="center">
<h3 align="center">Cash Position as on...... </h3>
<tr>
<th>Note</th>
<th>Quantity</th>
<th>Total</th>
</tr>
<tr>
<td>1000 Tk Note</td>
<td><input type="text" name="pages" class="row1" /></td>
<td><span class="row1c">0.00</span></td>
</tr>
<tr>
<td>500 Tk Note</td>
<td><input type="text" name="pages" class="row2" /></td>
<td><span class="row2c">0.00</span></td>
</tr>
<tr>
<td>100 Tk Note</td>
<td><input type="text" name="pages" class="row3" /></td>
<td><span class="row3c">0.00</span></td>
</tr>
<tr>
<td>50 Tk Note</td>
<td><input type="text" name="pages" class="row4" /></td>
<td><span class="row4c">0.00</span></td>
</tr>
<tr>
<td colspan ="2">Cash In Hand (Sum of All Totals)</td>
<td><span class="row5c">0.00</span></td>
</tr>
</table>
All codes together here:
https://jsfiddle.net/rashelmiah/fb9opo36/1/
Could you please me find a way to sum all the totals? Thanks in advance.
解决方案
You need add the following code.
$('input[type=text]').keyup(function(){
var total = 0;
$('input[type=text]').each(function(){
total += Number($(this).parent().next().find('span').text());
})
$('.row5c').text(total);
})
Note: Your code had a lot of <script> tags which was unnecessary. And a lot of ready() function, which was unnecessary too. You can wrap the whole code inside one <script> tag and one ready() function.
Demo:
$(document).ready(function() {
$('.row1').keyup(function(ev){
var row1c = $(this).val() * 1000;
$('.row1c').html((row1c).toFixed(2));
});
$('.row2').keyup(function(ev){
var row2c = $(this).val() * 500;
$('.row2c').html((row2c).toFixed(2));
});
$('.row3').keyup(function(ev){
var row3c = $(this).val() * 100;
$('.row3c').html((row3c).toFixed(2));
});
$('.row4').keyup(function(ev){
var row4c = $(this).val() * 50;
$('.row4c').html((row4c).toFixed(2));
});
$('.row5').keyup(function(ev){
var row5c = (row1c+row2c+row3c+row4c);
$('.row5c').html((row5c).toFixed(2));
});
$('input[type=text]').keyup(function(){
var total = 0;
$('input[type=text]').each(function(){
total += Number($(this).parent().next().find('span').text());
})
$('.row5c').text(total.toFixed(2));
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="2" cellpadding="5" cellspacing="2" align="center">
<h3 align="center">Cash Position as on...... </h3>
<tr>
<th>Note</th>
<th>Quantity</th>
<th>Total</th>
</tr>
<tr>
<td>1000 Tk Note</td>
<td>
<input type="text" name="pages" class="row1" />
</td>
<td><span class="row1c">0.00</span>
</td>
</tr>
<tr>
<td>500 Tk Note</td>
<td>
<input type="text" name="pages" class="row2" />
</td>
<td><span class="row2c">0.00</span>
</td>
</tr>
<tr>
<td>100 Tk Note</td>
<td>
<input type="text" name="pages" class="row3" />
</td>
<td><span class="row3c">0.00</span>
</td>
</tr>
<tr>
<td>50 Tk Note</td>
<td>
<input type="text" name="pages" class="row4" />
</td>
<td><span class="row4c">0.00</span>
</td>
</tr>
<tr>
<td colspan="2">Cash In Hand (Sum of All Totals)</td>
<td><span class="row5c">0.00</span>
</td>
</tr>
</table>
这篇关于如何总结jQuery输出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
