使用javascript计算总金额 [英] Calculate total amount using javascript

查看:102
本文介绍了使用javascript计算总金额的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

  <script type="text/javascript">
        function FetchData(button) {

            var row = button.parentNode.parentNode;
            var label = GetChildControl(row, "quantity_1").value;
            var label1 = GetChildControl(row, "product_rate_1").value;
            var Multi = parseFloat(label) * parseFloat(label1);
            //var grandtotal = $(this).find('.grand').val();
            GetChildControl(row, "total_price_1").value = Multi;
           
            var tot = 0;
            for (var i = 0; i < Multi.length; i++) {
                if (parseInt(Multi[i].value))
                    tot += parseInt(Multi[i].value);
            }
            document.getElementById('grandTotal').value = tot;
            console.log(+tot)
        };

        function GetChildControl(element, id) {
            var child_elements = element.getElementsByTagName("*");
            for (var i = 0; i < child_elements.length; i++) {
                if (child_elements[i].id.indexOf(id) != -1) {
                    return child_elements[i];
                    console.log(+i)

                }
            }
        };
  </script>
<pre>       <table class="table" id="maintable">
                                <thead>
                                    <tr>
                                            <th class="text-center" width="20%">Item Information*</th> 
                                            <th class="text-center">Batch ID *</th>
                                             <th class="text-center">Expiry  date *</th>
                                            <th class="text-center">Stock/Qnt</th>
                                            <th class="text-center">Quantity *</th>
                                            <th class="text-center">Manufacturer  Price*</th>
                                            <th class="text-center">Total</th>
                                            <th class="text-center">Action</th>
                                        </tr>
                                </thead>
                                <tbody>
                                    <tr class="data-contact-person">
                                        <td>

                                          <input type="text" name="f-name" class="form-control f-name01" /></td>
                                                    
                                         <td>
                                          <input type="text" name="l-name" class="form-control l-name01" /></td>
                                                                                   
                                            <td>
                                              <input type="text" name="email"  class="form-control datepicker" /></td>
                                                                                 
                                       <td >

                                        <input type="text" name="stock" class="form-control stock01" /></td>
                                             
                                            <td>
                                               <input type="text" name="product_quantity" id="quantity_1"  onkeyup="FetchData(this),findTotal()"  placeholder="0.00" value="" min="0" class="form-control qty01" required="required"/></td>
                                                                                  
                                            <td >

                                             <input type="text" name="product_rate" onkeyup="FetchData(this),findTotal()"  id="product_rate_1" placeholder="0.00" value="" min="0"  class="form-control rate01" required="required"/></td>
                                             
                                            <td>
                                             <input type="text" name="total_price" id="total_price_1" value="0.00"  readonly="readonly" class="form-control total_price" /></td>
                                             
                                            <td>

                                               <button type="button" id="btnAdd"  onclick="FetchData(this),findTotal()" class="btn btn-xs btn-primary  classAdd">Add More</button>
                                              
                                            </td>
                                    </tr>
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td colspan="2">

                                       
                                           <%-- <input type="button" id="add_invoice_item" class="btn btn-info" name="add-invoice-item" onclick="addPurchaseOrderField1('addPurchaseItem');" value="Add New Item" tabindex="11">--%>

                                            <input type="hidden" name="baseUrl" class="baseUrl" value="">
                                        </td>
                                        <td style="text-align:right;" colspan="4">Grand Total:</td>
                                        <td class="text-right">
                                            <input type="text" id="grandTotal" class="text-right form-control" name="grand_total_price" value="0.00" readonly="readonly">
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>





我尝试过:





What I have tried:

<script type="text/javascript">
       function findTotal() {
           var arr = document.getElementsByName('total_price');
           var tot = 0;
           for (var i = 0; i < arr.length; i++) {
               if (parseInt(arr[i].value))
                   tot += parseInt(arr[i].value);
           }
           document.getElementById('grandTotal').value = tot;
           console.log(+tot)
       }

   </script>





第一排获得计算总计,如果我动态添加行

不计算。 。



First Row getting Calculate grandtotal ,if i added the row dynamically
not calculating..

推荐答案

(this).find('。grand')。val();
GetChildControl(row,total_price_1)。value = Multi;

var tot = 0;
for(var i = 0; i< Multi.length; i ++){
if(parseInt(Multi [i] .value))
tot + = parseInt(Multi [i] 。值);
}
document.getElementById('grandTotal')。value = tot;
console.log(+ tot)
};

函数GetChildControl(element,id){
var child_elements = element.getElementsByTagName(*);
for(var i = 0; i< child_elements.length; i ++){
if(child_elements [i] .id.indexOf(id)!= -1){
return child_elements [一世];
console.log(+ i)

}
}
};
< / script>
< pre> < table class =tableid =maintable>
< thead>
< tr>
< th class =text-centerwidth =20%>项目信息 * < / th>
< th class =text-center>批次ID * < / th>
< th class =text-center>到期日 * < / th>
< th class =text-center> Stock / Qnt< / th>
< th class =text-center>数量 * < / th>
< th class =text-center>制造商价格 * < / th>
< th class =text-center>总计< / th>
< th class =text-center>动作< / th>
< / tr>
< / thead>
< tbody>
< tr class =data-contact-person>
< td>

< input type =textname =f-nameclass =form-control f-name01/>< / td>

< td>
< input type =textname =l-nameclass =form-control l-name01/>< / td>

< td>
< input type =textname =emailclass =form-control datepicker/>< / td>

< td>

< input type =textname =stockclass =form-control stock01/>< / td>

< td>
< input type =textname =product_quantityid =quantity_1onkeyup =FetchData(this),findTotal()placeholder =0.00value =min =0class = form-control qty01required =required/>< / td>

< td>

< input type =textname =product_rateonkeyup =FetchData(this),findTotal()id =product_rate_1placeholder =0.00value =min = 0class =form-control rate01required =required/>< / td>

< td>
< input type =textname =total_priceid =total_price_1value =0.00readonly =readonlyclass =form-control total_price/>< / td>

< td>

< button type =buttonid =btnAddonclick =FetchData(this),findTotal()class =btn btn-xs btn-primary classAdd> Add More< /按钮>

< / td>
< / tr>
< / tbody>
< tfoot>
< tr>
< td colspan =2>


<% - < input type =buttonid =add_invoice_itemclass =btn btn-infoname =add-invoice-itemonclick = addPurchaseOrderField1( 'addPurchaseItem'); value =添加新项tabindex =11> - %>

< input type =hiddenname =baseUrlclass =baseUrlvalue =>
< / td>
< td style =text-align:right; colspan =4> 总计:< / td>
< td class =text-right>
< input type =textid =grandTotalclass =text-right form-controlname =grand_total_pricevalue =0.00readonly =readonly>
< / td>
< / tr>
< / tfoot>
< / table>
< / div>
(this).find('.grand').val(); GetChildControl(row, "total_price_1").value = Multi; var tot = 0; for (var i = 0; i < Multi.length; i++) { if (parseInt(Multi[i].value)) tot += parseInt(Multi[i].value); } document.getElementById('grandTotal').value = tot; console.log(+tot) }; function GetChildControl(element, id) { var child_elements = element.getElementsByTagName("*"); for (var i = 0; i < child_elements.length; i++) { if (child_elements[i].id.indexOf(id) != -1) { return child_elements[i]; console.log(+i) } } }; </script> <pre> <table class="table" id="maintable"> <thead> <tr> <th class="text-center" width="20%">Item Information*</th> <th class="text-center">Batch ID *</th> <th class="text-center">Expiry date *</th> <th class="text-center">Stock/Qnt</th> <th class="text-center">Quantity *</th> <th class="text-center">Manufacturer Price*</th> <th class="text-center">Total</th> <th class="text-center">Action</th> </tr> </thead> <tbody> <tr class="data-contact-person"> <td> <input type="text" name="f-name" class="form-control f-name01" /></td> <td> <input type="text" name="l-name" class="form-control l-name01" /></td> <td> <input type="text" name="email" class="form-control datepicker" /></td> <td > <input type="text" name="stock" class="form-control stock01" /></td> <td> <input type="text" name="product_quantity" id="quantity_1" onkeyup="FetchData(this),findTotal()" placeholder="0.00" value="" min="0" class="form-control qty01" required="required"/></td> <td > <input type="text" name="product_rate" onkeyup="FetchData(this),findTotal()" id="product_rate_1" placeholder="0.00" value="" min="0" class="form-control rate01" required="required"/></td> <td> <input type="text" name="total_price" id="total_price_1" value="0.00" readonly="readonly" class="form-control total_price" /></td> <td> <button type="button" id="btnAdd" onclick="FetchData(this),findTotal()" class="btn btn-xs btn-primary classAdd">Add More</button> </td> </tr> </tbody> <tfoot> <tr> <td colspan="2"> <%-- <input type="button" id="add_invoice_item" class="btn btn-info" name="add-invoice-item" onclick="addPurchaseOrderField1('addPurchaseItem');" value="Add New Item" tabindex="11">--%> <input type="hidden" name="baseUrl" class="baseUrl" value=""> </td> <td style="text-align:right;" colspan="4">Grand Total:</td> <td class="text-right"> <input type="text" id="grandTotal" class="text-right form-control" name="grand_total_price" value="0.00" readonly="readonly"> </td> </tr> </tfoot> </table> </div>





我尝试过:





What I have tried:

<script type="text/javascript">
       function findTotal() {
           var arr = document.getElementsByName('total_price');
           var tot = 0;
           for (var i = 0; i < arr.length; i++) {
               if (parseInt(arr[i].value))
                   tot += parseInt(arr[i].value);
           }
           document.getElementById('grandTotal').value = tot;
           console.log(+tot)
       }

   </script>





第一排获得计算总计,如果我动态添加行

不计算。 。



First Row getting Calculate grandtotal ,if i added the row dynamically
not calculating..


1)首先尝试使用
Document.getElementsByClassName()

获取项目数组

然后它会拉出所有带有该类名的项目。



2)动态添加行后,尝试查看页面源并检查是否有该标记包含您要提取的特定类名。



3)在循环数组之前。尝试检查数组的长度,以便了解所有行项是否存在

"
Then it will pull all the items with that class name.

2) After adding the row dynamically, try to view the page source and check whether that tag contains specific class name that you are trying to pull.

3) Before looping the array. try to check the lenght of array, so that you will get idea whether that all row items are present or not


这篇关于使用javascript计算总金额的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆