2

我有如下表：

<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字段并放入总计字段。

我试过像下面这样总是返回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));  
})  
});
4

3 回答 3

3

这里有几个错误，包括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));  
})

示例小提琴

更新

为选择添加了空白默认值：

$('.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);  
    }
})

小提琴

于 2012-05-10T11:49:52.423 回答
3

而不是var $row = $(this).parent();尝试

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

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

于 2012-05-10T11:45:45.877 回答
2

试试这个，未测试

$(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));  
})  
});
于 2012-05-10T11:46:34.370 回答