[英]JQuery sum all data in specific table row with constraints
<table>
<tr>
<td><input value = "100/100"/></td>
<td><input value = "100/100"/></td>
<td><input value = "100/100"/></td>
<td class="total">300/300</td>
</tr>
<tr>
<td><input value = "200/200"/></td>
<td><input value = "200/200"/></td>
<td><input value = "200/200"/></td>
<td class="total">600/600</td>
</tr>
</table>
$(document).ready(function(){
$("input").keyup(function(){
var suma = 0;
$(this).parents("tr").children("td").children().each(function(){
suma+= parseInt($(this).val());
});
$(this).parent().parent().children(":last").text(suma);
});
});
The above jquery function gets me the sum when I enter numeric values, but I want to change the my input value format using delimiter "/" example 10/20. 当我输入数值时,上面的jquery函数为我提供了总和,但是我想使用定界符“ /”示例10/20更改输入值的格式。 I want the sum like this example 10/20 + 20/30 = 30/50.
我想要这样的总和,例如10/20 + 20/30 = 30/50。 I know that my input values will be in the form of String and will have to parse the numerator and denominator values , add them and put it back as total in String format.
我知道我的输入值将采用String的形式,并且必须解析分子和分母的值,将它们相加,然后以String格式作为总值返回。 Please help.
请帮忙。
@Priya Srivatsa, try with below solution @Priya Srivatsa,尝试以下解决方案
$(document).ready(function(){ $("input").keyup(function(){ var suma = 0; var firstSum = 0; var secondsum = 0; $(this).parents("tr").children("td").children().each(function(){ // suma+= parseInt($(this).val()); var getVal = $(this).val(); if(getVal.indexOf("/")>-1) { var sumVals = getVal.split('/'); firstSum+= parseInt(sumVals[0]); secondsum+= parseInt(sumVals[1]); } else{ firstSum+= parseInt(getVal); } }); $(this).parent().parent().children(":last").text(firstSum + "/" +secondsum ); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td><input value = "100/100"/></td> <td><input value = "100/100"/></td> <td><input value = "100/100"/></td> <td class="total">300/300</td> </tr> <tr> <td><input value = "200/200"/></td> <td><input value = "200/200"/></td> <td><input value = "200/200"/></td> <td class="total">600/600</td> </tr> </table>
Let me know is this solution works for you? 让我知道这个解决方案对您有用吗?
You can reduce
over each input
in a tr
and sum up the split
value
s: 您可以
reduce
tr
每个input
并求和split
value
s:
$("input").keyup(function() { const tr = this.closest('tr'); const [sumA, sumB] = [...tr.querySelectorAll('input')] .reduce(([sumA, sumB], input) => { const [inputA, inputB] = input.value.split('/').map(Number); return [sumA + inputA, sumB + inputB]; }, [0, 0]); tr.querySelector('.total').textContent = sumA + '/' + sumB; });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td><input value="100/100" /></td> <td><input value="100/100" /></td> <td><input value="100/100" /></td> <td class="total">300/300</td> </tr> <tr> <td><input value="200/200" /></td> <td><input value="200/200" /></td> <td><input value="200/200" /></td> <td class="total">600/600</td> </tr> </table>
You can do it this way : https://codepen.io/creativedev/pen/mKXXWm 您可以通过以下方式进行操作: https : //codepen.io/creativedev/pen/mKXXWm
$(document).ready(function(){
$("input").keyup(function(){
var suma = 0;
var sumb = 0;
$(this).parents("tr").children("td").children().each(function(){
var enteredval = $(this).val().split("/");
suma+= parseInt(enteredval[0]);
sumb+= parseInt(enteredval[1]);
});
$(this).parent().parent().children(":last").text(suma+"/"+sumb);
});
});
You need to split the text before you change the value. 您需要先分割文本,然后再更改值。
Javascript has split() method, in your case you can split by "/" which will give you numerator and denominator. Javascript具有split()方法,在您的情况下,您可以用“ /”分隔,这将为您提供分子和分母。 Do the sum on both and while displaying it again display by combining both with "/" at mid.
对两者进行求和,并在再次显示时通过与中间的“ /”组合来再次显示。
http://jsfiddle.net/gvdfpkh5/9/ http://jsfiddle.net/gvdfpkh5/9/
<table>
<tr>
<td><input value = "100/100"/></td>
<td><input value = "100/100"/></td>
<td><input value = "100/100"/></td>
<td id="test" class="total">300/300</td>
</tr>
<tr>
<td><input value = "200/200"/></td>
<td><input value = "200/200"/></td>
<td><input value = "200/200"/></td>
<td class="total">600/600</td>
</tr>
</table>
$(document).ready(function(){
$("input").keyup(function(){
var sumd = 0;
var sumn = 0;
$(this).parents("tr").children("td").children().each(function(){
var val = $(this).val().split("/");
sumd+= parseInt(val[0]);
sumn+= parseInt(val[1]);
});
//alert(sumd);
$(this).parents("tr").children("td:last-child").text(sumd+"/"+sumn);
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.