计算表格行并填充总计字段答案

【问题标题】：Calculate table rows and populate the grand total field计算表格行并填充总计字段
【发布时间】：2012-05-10 20:10:46
【问题描述】：

我有如下表格：

<table>
  <thead>
    <th>Product Type</th>
    <th>Quantity</th>
    <th>Unit</th>
    <th>Total</th>
  </thead>
  <tr>
     <td>Gas</td>
     <td><input type="text" name="qty" /></td>
     <td>
        <select id="unit" name="unit">
           <option value="30.42">Liter</option>
           <option value="25.30">Ton</option>
           <option value="45.10">Kg</option>
     </td>
     <td><input type="text" readonly="readonly" name="total" /></td>
  </tr>
  <tr>
     <td>Diesel</td>
     <td><input type="text" name="qty" /></td>
     <td>
        <select id="unit" name="unit">
           <option value="20.42">Liter</option>
           <option value="18.30">Ton</option>
           <option value="25.10">Kg</option>
     </td>
     <td><input type="text" readonly="readonly" name="total" /></td>
  </tr>
  <tr>
     <td>Fuel</td>
     <td><input type="text" name="qty" /></td>
     <td>
        <select id="unit" name="unit">
           <option value="30.42">Liter</option>
           <option value="25.30">Ton</option>
           <option value="45.10">Kg</option>
     </td>
     <td><input type="text" readonly="readonly" name="total" /></td>
  </tr>

我想根据qty 和unit 计算每一行的 (qty * unit) 并将结果放在total 列。

在计算结束时，我想将sum 整个total 字段放入Grand Total 字段。

我尝试像下面这样总是返回NaN，但是当我通过typeof检查值时返回number！！！：

$(document).ready(function() {  
$('input[name^=qty], select[name^=unit]').change(function(){  
   var total = 0;
   var $row = $(this).parent();  
   var qty = parseFloat($row.find('input[name=qty]').val());  
   var price = parseFloat($row.find("select[name='unit'] option:selected").val());
   total = parseFloat(qty * price);  
   $row.find('.amount').text(parseFloat(qty * price));  
})  
});

【问题讨论】：

标签： javascript jquery

【解决方案1】：

这里有几个错误，包括在输入字段上使用text()，以及使用parent() 而不是closest("tr")。

我还为您的元素添加了类，以使选择器更容易。试试这个：

$('.qty, .unit').change(function(){  
   var total = 0;
   var $row = $(this).closest("tr");  
   var qty = parseFloat($row.find('.qty').val());  
   var price = parseFloat($row.find(".unit").val());
   total = parseFloat(qty * price);  
   $row.find('.total').val(parseFloat(qty * price));  
})

Example fiddle

更新

为选择添加空白默认值：

$('.qty, .unit').change(function(){  
    var total = 0;
    var $row = $(this).closest("tr");  
    var qty = parseFloat($row.find('.qty').val());  
    var price = parseFloat($row.find(".unit").val());
    total = qty * price;  

    if (isNaN(total)) {
        $row.find('.total').val("");  
    }
    else {
        $row.find('.total').val(total);  
    }
})

Fiddle

【讨论】：

Okies + 1 用于使用类 bruv，Legend！
我还有一个问题。我们可以在这个 sn-p 中使用 option:selected 元素吗？因为，当用户输入数量时，脚本会根据默认的option自动计算。
@OğuzÇelikdemir 通过在选择上使用.val()，jQuery 会自动获取所选option 的值。如果您不希望这样，请为每个选择添加一个空选项。

【解决方案2】：

代替var $row = $(this).parent();试试

var $row = $(this).closest("tr");

您的代码正在查看 td，您需要找到 tr。 Closest 查找与 DOM 树最接近的匹配项。

【讨论】：

天哪，谢谢！对于最近（），与问题无关，但我个人非常需要该功能！

【解决方案3】：

试试这个，没测试过

$(document).ready(function() {  
$('input[name^=qty], select[name^=unit]').change(function(){  
   var total = 0;
   var $row = $(this).parent().prev();  //changed here
   var qty = parseFloat($row.find('input[name=qty]').val());  
   var price = parseFloat($row.find("select[name='unit'] option:selected").val());
   total = parseFloat(qty * price);  
   $row.find('.amount').text(parseFloat(qty * price));  
})  
});

【讨论】：