如何使用jQuery在html中自动求和行数？_Html_Jquery

如何使用jQuery在html中自动求和行数？

html jquery

如何使用jQuery在html中自动求和行数？,html,jquery,Html,Jquery,我想在html中自动求和行，然后使用jQuery显示结果我试过了，但失败了，下面是我使用循环的示例代码 <html> <head> <title></title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script

我想在html中自动求和行，然后使用jQuery显示结果我试过了，但失败了，下面是我使用循环的示例代码

<html>
<head>
<title></title>
    
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" /></script>
    
    

<script>
$.fn.fonkTopla = function() {
var toplam = 1;
this.each(function() {
   var deger = fonkDeger($(this).val());
   
   //get the data attr value
   var diff = $(this).data('diff');
   var Quantity_val = $(this).closest('tr').find('.Quantity').val();
   var QuantityBack_val = $(this).closest('tr').find('.QuantityBack').val();
   var UnitPrice_val = $(this).closest('tr').find('.UnitPrice').val(); 
   
   var paid_val = $(this).closest('tr').find('.paid').val();
   
   //On based on data attribute, if the input field is paid, do not multiply,
   if(!diff){
   //toplam *= deger;
   toplam= (Quantity_val * UnitPrice_val);
   
   //take the result minus paid field
   total = (toplam) - paid_val-(QuantityBack_val * UnitPrice_val);
   }
});
return total;
};


function fonkDeger(veri) {
    return (veri != '') ? parseInt(veri) : 1;
}

$(document).ready(function(){
$('input[name^="fiyat"]').bind('keyup', function() {

   //for multiple tr, get the closest tr field value to calculate and display
   $(this).closest('tr').find('.toplam').html( $(this).closest('tr').find('input[name^="fiyat"]').fonkTopla());
});
});
</script>

</head>
<body>




<?php
for($counter1=0;$counter1<=2;$counter1++)
{
?>
<table>
<?php
for($counter2=0;$counter2<=2;$counter2++)
{
?>
<tr>
<td><input type="number" name="fiyat[]" class="Quantity" /></td>
<td><input type="number" name="fiyat[]" data-diff="true"  class="QuantityBack" /></td>
<td><input type="number" name="fiyat[]" class="title UnitPrice" value="500" /></td>
<td><input type="number" name="fiyat[]" data-diff="true"  class="paid" /></td>
<td style="text-align:right" bgcolor="#FF5733"><span class="toplam"></span>
</tr>


<?php
}
?>
</table>
<?php
}
?>

<!--I NEED TO CALCULATE SUB TOTAL OF EACH TABLE IN LOOP IN BELOW CODES, I NEED SUB TOTAL UNDER LAST RED COLUMN-->
<script>
var totalRow = '', columnNo = $('table tr:first td').length;

for (var index = 0; index < columnNo; index++) {
    var total = 0;
    $('table tr').each(function () {
        total += +$('td', this).eq(index).text(); //+ will convert string to number
    });
    totalRow += '<td>' + total + '</td>';
}

$('table').append('<tr>' + totalRow + '</tr>');
</script>
<!--end of jQuery used to auto sum subtotal-->




</body>
</html>


$.fn.fonkTopla=函数（）{
var-toplam=1；
这个。每个（函数（）{
var deger=fonkDeger（$（this.val（））；
//获取数据属性值
var diff=$（this.data（'diff'）；
var Quantity_val=$（this.closest（'tr'）。find（'.Quantity'）.val（）；
var QuantityBack_val=$（this.closest（'tr'）.find（'.QuantityBack'）.val（）；
var UnitPrice_val=$（this.closest（'tr'）。find（'.UnitPrice'）.val（）；
var paid_val=$（this.closest（'tr'）。find（'.paid'）.val（）；
//基于数据属性，如果输入字段已支付，则不要乘法，
if（！diff）{
//toplam*=除气器；
toplam=（数量值*单价值）；
//取结果减去支付字段
总计=（toplam）-已付金额-（数量回退金额*单价）；
}
});
返回总数；
};
function fonkDeger（veri）{
返回（veri！=''）-parseInt（veri）：1；
}
$（文档）.ready（函数（）{
$（'input[name^=“fiyat”]”）。绑定（'keyup'，function（）{
//对于多个tr，获取要计算和显示的最近tr字段值
$（this.closest（'tr'）.find（'.toplam'）.html（$（this.closest（'tr'））.find（'input[name^=“fiyat”]'））.fonkTopla（））；
});
});
var totalRow=''，columnNo=$（'table tr:first td'）。长度；
对于（var索引=0；索引


问题在于jQuery中的Total（jQuery位于代码的底部）
请任何人都能帮助我们完成这项任务。我只需要循环中每个表的小计，但在红色列中。谢谢
在本例中，使用jQuery可以循环使用类选择器，toplamc
，并总结内容
jQuery:
var sum = 0;
$('.toplamc').each(function() {
     sum += parseFloat($(this).text());
});
$('#sum').text(sum);

这适用于动态添加的内容。您只需确保在创建动态内容后运行该功能。记住，代码是自顶向下执行的。它无法找到尚不存在的元素
因此，如果在已经计算总和的情况下继续添加动态内容，则每次添加新行时都需要连续执行sum函数
包含动态内容的代码片段示例：
var sum = 0;
$('.toplamc').each(function() {
     sum += parseFloat($(this).text());
});
$('#sum').text(sum);


$（'#createRowsBtn'）。在（“单击”，函数（）{
var classCount=$（'.toplamc'）.length；
如果（类计数>0）{
$（'#calcTable'）.html（“”）；
}
var rowCount=$（'#rowCount'）.val（）；
如果（rowCount<1 | | rowCount==“”）{
警报（“在输入字段中输入一个大于0的数字”）；
}否则{
$（“#另一个容器”）.css（“可见性”、“可见”）；
var html=''；
html+=''；
html+=‘随机资料’；
html+=''；
html+=‘更多随机内容’；
html+=''；
html+=''；
html+=''；
html+=‘美元’；
html+=''；
对于（变量i=0；i
#另一个容器{
可见性：隐藏；
}

行数：
创建行


另一排
添加行
当我运行它时，你的代码运行正常。唯一的问题是，当你运行calc_total（）
时，我看不到。我不知道为什么，因为我不擅长jQuery。你能帮我拿一下吗？谢谢看这里谢谢，但我这里有另一个问题，在12美元，我没有像12，14，15这样的静态值。我只有class=“toplamc”，它显示两个文本框总和的动态值。我怎么计算呢