jQuery對具有約束的特定表行中的所有數據求和

Question

<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);
    });
});

當我輸入數值時，上面的jquery函數為我提供了總和，但是我想使用定界符“ /”示例10/20更改輸入值的格式。 我想要這樣的總和，例如10/20 + 20/30 = 30/50。 我知道我的輸入值將采用String的形式，並且必須解析分子和分母的值，將它們相加，然后以String格式作為總值返回。 請幫忙。

Answer 1

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

讓我知道這個解決方案對您有用嗎？

Answer 2

您可以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> 

Answer 3

您可以通過以下方式進行操作： 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);
    });
});

Answer 4

您需要先分割文本，然后再更改值。

Javascript具有split（）方法，在您的情況下，您可以用“ /”分隔，這將為您提供分子和分母。 對兩者進行求和，並在再次顯示時通過與中間的“ /”組合來再次顯示。

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);
    });
});