javascript - 来自表/输入数据的按组的 Jquery 总和

Question

我正在寻找按组对我的表数据和总和进行分组（如按产品的总和价格）。在第二个表中。

我想按项目列分组或过滤，并对价格列的结果求和。

所以橘子（有两条线）应该是一条带有总价的线。

请参阅下面的示例：

    <table width="400" border="1">
      <tr>
        <td>Item</td>
        <td>Location</td>
        <td>Quantity</td>
        <td>Price</td>
      </tr>
      <tr>
        <td><input name="item" type="text" id="item" value="Orange" /></td>
        <td><input name="location" type="text" id="location" value="Tree" /></td>
        <td><input name="quantity" type="text" id="quantity" value="3" /></td>
        <td><input name="price" type="text" id="price" value="3.00" /></td>
      </tr>
      <tr>
        <td><input name="item" type="text" id="item2" value="Apple" /></td>
        <td><input name="location" type="text" id="location" value="Tree" /></td>
        <td><input name="quantity" type="text" id="quantity" value="1" /></td>
        <td><input name="price" type="text" id="price" value="1.00" /></td>
      </tr>
      <tr>
        <td><input name="item" type="text" id="item" value="Orange" /></td>
        <td><input name="location" type="text" id="location" value="Tree" /></td>
        <td><input name="quantity" type="text" id="quantity" value="4" /></td>
        <td><input name="price" type="text" id="price" value="4.00" /></td>
      </tr>
      <tr>
        <td><input name="item" type="text" id="item" value="Grapes" /></td>
        <td><input name="location" type="text" id="location" value="Vine" /></td>
        <td><input name="quantity" type="text" id="quantity" value="10" /></td>
        <td><input name="price" type="text" id="price" value="10.00" /></td>
      </tr>
    </table>

    <p>&nbsp;</p>
    <table width="400" border="1">
      <tr>
        <td>Orange</td>
        <td>7</td>
        <td>7.00</td>
      </tr>
      <tr>
        <td>Apple</td>
        <td>1</td>
        <td>1.00</td>
      </tr>
      <tr>
        <td>Grapes</td>
        <td>10</td>
        <td>10.00</td>
      </tr>  
    </table>

Answer 1

首先将 id "price" 更改为 class，然后

$(document).ready(function(){
   var sum = 0;
   $('.price').each(function(){
       sum += $(this).val();
   });
   alert("The sum is " + sum);
});

您也可以修改上面的代码以在按钮单击事件中获取总和。