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中的每个input上tr并总结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);
    });
});

jQuery对具有约束的特定表行中的所有数据求和

4 个答案: