當表單元素id和名稱在數組中時的javascript計算

Question

我有一個如下所述的表單。我無法用每個元素中傳遞的值的簡單JavaScript來計算。需要幫助。

<script> 
    function calculate(){ 
     c = document.getElementById('count').value; 
     for(k = 0; k<c; k++){    
      var amt = 0; 
      var tamt = 0; 

      totamt[k] = document.getElementById('Amount').value[k]*document.getElementById('Months').value[k]; 
      document.getElementById('TotAmt').value[k] = totamt[k]; 

     } 

    } 
    </script> 

<table> 
    <tr> 
     <td>SN</td> 
     <td>Fee Description</td> 
     <td>Amount</td> 
     <td>Occurence</td> 
     <td>Total Amount</td> 
     <td></td> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td><select name="FeeCode[]" class="form-control" required> 
      <option value=""></option> 
      <?php echo $fClass?> 

     </select></td> 
     <td><input type="text" name="Amount[]" id="Amount[]" class="form-control" maxlength="10" style="text-align: right" required></td> 
     <td><select name="Months[]" id="Months[]" class="form-control" onchange="calculate()" required> 
      <option value=""></option> 
      <option value=0>One Time</option> 
      <option value=1>Monthly</option> 
      <option value=3>Quarterly</option> 
      <option value=6>Half Yearly</option> 
      <option value=12>Annually</option> 
     </select></td> 
     <td><input type="text" name="TotAmt[]" id="TotAmt[]" class="form-control" maxlength="10" value="0" style="text-align: right" required></td> 
     <td><a href="javascript:void(0);" class="addCF">Add More</a></td> 
    </tr> 
    <tr> 
     <td>2</td> 
     <td><select name="FeeCode[]" class="form-control" required> 
      <option value=""></option> 
      <?php echo $fClass?> 

     </select></td> 
     <td><input type="text" name="Amount[]" id="Amount[]" class="form-control" maxlength="10" style="text-align: right" required></td> 
     <td><select name="Months[]" id="Months[]" class="form-control" onchange="calculate()" required> 
      <option value=""></option> 
      <option value=0>One Time</option> 
      <option value=1>Monthly</option> 
      <option value=3>Quarterly</option> 
      <option value=6>Half Yearly</option> 
      <option value=12>Annually</option> 
     </select></td> 
     <td><input type="text" name="TotAmt[]" id="TotAmt[]" class="form-control" maxlength="10" value="0" style="text-align: right" required></td> 
     <td><a href="javascript:void(0);" class="addCF">Add More</a></td> 
    </tr> 
    <tr> 
     <td>3</td> 
     <td><select name="FeeCode[]" class="form-control" required> 
      <option value=""></option> 
      <?php echo $fClass?> 

     </select></td> 
     <td><input type="text" name="Amount[]" id="Amount[]" class="form-control" maxlength="10" style="text-align: right" required></td> 
     <td><select name="Months[]" id="Months[]" class="form-control" onchange="calculate()" required> 
      <option value=""></option> 
      <option value=0>One Time</option> 
      <option value=1>Monthly</option> 
      <option value=3>Quarterly</option> 
      <option value=6>Half Yearly</option> 
      <option value=12>Annually</option> 
     </select></td> 
     <td><input type="text" name="TotAmt[]" id="TotAmt[]" class="form-control" maxlength="10" value="0" style="text-align: right" required></td> 
     <td><a href="javascript:void(0);" class="addCF">Add More</a></td> 
    </tr> 
    </table> 
    <input type="hidden" value="1" name="count" id="count" /> 
    <button type="submit" class="btn btn-success">Submit</button> 

對於每一行，id="TotAmt[]"應有的價值id="Months[]" * id="Amount[]"。

需要簡單的JavaScript計算相同

Answer 1

使用parentElement訪問當前元素的父元素。在文檔標記和迭代由第一元件|也通過從inline-event-binding-method（calculate）this上下文，以便this將是（使用文檔的節點的深度優先前序遍歷文檔內select element

Document.querySelector()返回所述第一元件通過按照子節點的數量順序的順序節點）與指定的選擇器組相匹配。 試試這個：

function calculate(elem) { 
 
    var tr = elem.parentElement.parentElement; 
 
    var amt = parseInt(tr.querySelector('[name="Amount[]"]').value||0, 10); 
 
    var mon = parseInt(tr.querySelector('[name="Months[]"]').value||0, 10); 
 
    tr.querySelector('[name="TotAmt[]"]').value = (amt * mon); 
 
}

<table> 
 
    <tr> 
 
    <td>SN</td> 
 
    <td>Fee Description</td> 
 
    <td>Amount</td> 
 
    <td>Occurence</td> 
 
    <td>Total Amount</td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td> 
 
     <select name="FeeCode[]" class="form-control" required> 
 
     <option value=""></option> 
 

 
     </select> 
 
    </td> 
 
    <td> 
 
     <input type="text" name="Amount[]" id="Amount[]" class="form-control" maxlength="10" style="text-align: right" required> 
 
    </td> 
 
    <td> 
 
     <select name="Months[]" id="Months[]" class="form-control" onchange="calculate(this)" required> 
 
     <option value=""></option> 
 
     <option value=0>One Time</option> 
 
     <option value=1>Monthly</option> 
 
     <option value=3>Quarterly</option> 
 
     <option value=6>Half Yearly</option> 
 
     <option value=12>Annually</option> 
 
     </select> 
 
    </td> 
 
    <td> 
 
     <input type="text" name="TotAmt[]" id="TotAmt[]" class="form-control" maxlength="10" value="0" style="text-align: right" required> 
 
    </td> 
 
    <td><a href="javascript:void(0);" class="addCF">Add More</a></td> 
 
    </tr> 
 
    <tr> 
 
    <td>2</td> 
 
    <td> 
 
     <select name="FeeCode[]" class="form-control" required> 
 
     <option value=""></option> 
 
     <?php echo $fClass?> 
 

 
     </select> 
 
    </td> 
 
    <td> 
 
     <input type="text" name="Amount[]" id="Amount[]" class="form-control" maxlength="10" style="text-align: right" required> 
 
    </td> 
 
    <td> 
 
     <select name="Months[]" id="Months[]" class="form-control" onchange="calculate(this)" required> 
 
     <option value=""></option> 
 
     <option value=0>One Time</option> 
 
     <option value=1>Monthly</option> 
 
     <option value=3>Quarterly</option> 
 
     <option value=6>Half Yearly</option> 
 
     <option value=12>Annually</option> 
 
     </select> 
 
    </td> 
 
    <td> 
 
     <input type="text" name="TotAmt[]" id="TotAmt[]" class="form-control" maxlength="10" value="0" style="text-align: right" required> 
 
    </td> 
 
    <td><a href="javascript:void(0);" class="addCF">Add More</a></td> 
 
    </tr> 
 
    <tr> 
 
    <td>3</td> 
 
    <td> 
 
     <select name="FeeCode[]" class="form-control" required> 
 
     <option value=""></option> 
 
     <?php echo $fClass?> 
 

 
     </select> 
 
    </td> 
 
    <td> 
 
     <input type="text" name="Amount[]" id="Amount[]" class="form-control" maxlength="10" style="text-align: right" required> 
 
    </td> 
 
    <td> 
 
     <select name="Months[]" id="Months[]" class="form-control" onchange="calculate(this)" required> 
 
     <option value=""></option> 
 
     <option value=0>One Time</option> 
 
     <option value=1>Monthly</option> 
 
     <option value=3>Quarterly</option> 
 
     <option value=6>Half Yearly</option> 
 
     <option value=12>Annually</option> 
 
     </select> 
 
    </td> 
 
    <td> 
 
     <input type="text" name="TotAmt[]" id="TotAmt[]" class="form-control" maxlength="10" value="0" style="text-align: right" required> 
 
    </td> 
 
    <td><a href="javascript:void(0);" class="addCF">Add More</a></td> 
 
    </tr> 
 
</table> 
 
<input type="hidden" value="1" name="count" id="count" /> 
 
<button type="submit" class="btn btn-success">Submit</button>

Fiddle here