我想要在中間的列表中進行計算，並將這些值存儲在最終金額欄

Question

請幫助我對此有所瞭解。我想要做計算（可以被1000整除的選定值）和Amount與Amount的關係，並且應該存儲在第5列中。 即產品1 =（100/1000）* 100 = 10

這裏是我的代碼：

<table border="1"> 
<tbody> 
    <tr> 
     <td width="334">S.No.</td> 
     <td width="334">Product Name</td> 
     <td width="334">Amount</td> 
     <td width="334">Grams/Kg</td> 
     <td width="334">Final Amount</td> 
    </tr> 
    <tr align="center"> 
     <td>1</td> 
     <td>Product1</td> 
     <td>100</td> 
     <td> 
      <select id="grams"> 
       <option value=""></option> 
       <option value="100">100g</option> 
       <option value="250">250g</option> 
       <option value="500">500g</option> 
      </select> 
     </td> 
     <td>I want to do calculation (selectedvalue/1000) * Amount, that amount want to reflect here</td> 
    </tr> 
    <tr align="center"> 
     <td>2</td> 
     <td>Product2</td> 
     <td>200</td> 
     <td> 
      <select id="grams"> 
       <option value=""></option> 
       <option value="100">100g</option> 
       <option value="250">250g</option> 
       <option value="500">500g</option> 
      </select> 
     </td> 
     <td>I want to do calculation (selectvalue/1000) * Amount, that amount want to reflect here</td> 
    </tr> 
</tbody> 

Answer 1

這可以幫助你瞭解如何格式化表來獲取值

$(function(){ 
    $('select').change(function(){ 
     var td_id = 'row'+$(this).attr('id'); 
     var val = $(this).val(); 
     var amount = $('.'+td_id+'-amount').html(); 
     $('#'+td_id).html(val/1000*amount); 
    }); 
}); 

在該示例中，您必須添加一些額外的ids和classes。見Fiddle

（我想你想有2點以上的行。其他的答案可能更容易在你的情況下使用）

Answer 2

首先，你不能有相同的ID兩個元素。 ID需要獨特。所以你需要改變第二個選擇框的ID。

然後，我在td上放置一個id進行計算，並在td上包含金額的id。

<table border="1"> 
<tbody> 
<tr> 
    <td width="334">S.No.</td> 
    <td width="334">Product Name</td> 
    <td width="334">Amount</td> 
    <td width="334">Grams/Kg</td> 
    <td width="334">Final Amount</td> 
</tr> 
<tr align="center"> 
    <td>1</td> 
    <td>Product1</td> 
    <td id="amtFirst">100</td> 
    <td> 
     <select id="grams"> 
      <option value=""></option> 
      <option value="100">100g</option> 
      <option value="250">250g</option> 
      <option value="500">500g</option> 
     </select> 
    </td> 
    <td id="firstCalculation"></td> 
</tr> 
<tr align="center"> 
    <td>2</td> 
    <td>Product2</td> 
    <td id="amtSecond">200</td> 
    <td> 
     <select id="secondGrams"> 
      <option value=""></option> 
      <option value="100">100g</option> 
      <option value="250">250g</option> 
      <option value="500">500g</option> 
     </select> 
    </td> 
    <td id="secondCalculation"></td> 
</tr> 
</tbody> 

然後，你需要使用jquery：

//handles the first select box 
$('table').on('change','#grams',function(){ 
    var selection = $(this).val(); 
    var amount = $('#amtFirst').html(); 

    selection = (selection/1000)*amount; 
    $('#firstCalculation').html(selection); 
}); 

//handles the second select box 
$('table').on('change','#secondGrams',function(){ 
    var selection = $(this).val(); 
    var amount = $('#amtSecond').html(); 

    selection = (selection/1000)*amount; 
    $('#secondCalculation').html(selection); 
});