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各行に基づいて（qty * unit）を計算unitし、結果の列を配置したいと思いtotalます。

計算の最後に、フィールドsum全体totalを入力して、総計フィールドを配置します。

私はいつも戻ってくる以下のように試しましたが、私が返すNaNことによって値をチェックしたとき!!! ：typeofnumber

$(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

var $row = $(this).parent();試す代わりに

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

あなたが持っているコードはtdを見ていて、trを見つける必要があります。最も近いものは、DOMツリーで最も近いものを探します。

于 2012-05-10T11:45:45.877 に答える
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 に答える
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 に答える