表单元素id＆amp;时的javascript计算name在数组中

时间：2016-02-26 06:59:28

标签： javascript

我有一个下面提到的表格。我无法使用每个元素中传递的值的简单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来计算相同的

1 个答案:

答案 0 :(得分：0)

  

使用parentElement访问当前元素的父元素。同时从this（inline-event-binding-method）传递calculate上下文，以便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

相关问题
最新问题