Question

我有如下表：

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

Answer 1

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

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

您拥有的代码正在查看td，您需要找到tr。最近看起来最接近DOM树。

Answer 2

此处有几个错误，包括在输入字段上使用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

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

计算表行并填充总计字段

3 个答案: