• 实时监测input中值的变化


    直接记录下上代码

    HTML

    <table id="table0" name="table0" border="1" cellspacing="" cellpadding="" style="widtd:100%;border:1px solid #000">
                                <tr>
                                    <td style=" 90px;"><label class="font36">申购部门</label></td>
                                    <td colspan="2">
                                        <div class="car_num"style="height: 40px;" onclick="diaDepaPer(9)">
                                            <a class="mui-icon mui-icon-arrowdown" style="padding: 0px;margin: 10px 3px 0 0;float: right;color: #000;" ></a>
                                            <span id="met_company" class="fl "style="color: #8F8F94;font-size: 14px;line-height: 40px;">未选择</span>
                                        </div>
                                    </td>
                                    <td style=" 60px;"><label class="font36">申购人</label></td>
                                    <td >
                                        <div id="" class="fr met-per" style="">
                                            <a class="mui-icon mui-icon-arrowdown "style="margin:10px 0px 0px 0px;color: #000;float: right;    " onclick="diaDepaPer(10)"></a>
                                            <div class="div_xrx" id="relateduni" style="">
                                                <label class="label_z" style="line-height: 40px;color: #8F8F94;margin-left: 2px;font-size: 14px;">未选择</label>
                                            </div>
                                            
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2"><label class="font36">部门财务审签人</label></td>
                                    <td colspan="3">
                                        <div id="" class="fr met-per" style="">
                                            <a class="mui-icon mui-icon-arrowdown "style="margin:10px 0px 0px 0px;color: #000;float: right;    " onclick="diaDepaPer(11)"></a>
                                            <div class="div_xrx" id="relateduni2" style="">
                                                <label class="label_z" style="line-height: 40px;color: #8F8F94;margin-left: 2px;font-size: 14px;">未选择</label>
                                            </div>
                                            
                                        </div>
                                    </td>
                                    
                                </tr>
                                <tr><td colspan="6" class="font36" style="text-align: center; height: 40px;line-height: 40px;">申购物品</td></tr>
                                <tr style="widtd:100%;height: 40px;line-height: 40px;background-color: #fff;">
                                    <td class="td name_0" style="widtd: 30%;">名称</td>
                                    <td class="td name_1" style="widtd: 30%;">规格型号</td>
                                    <td class="td name_2" style="widtd: 10%;">数量</td>
                                    <td class="td name_3" style="widtd: 10%;">单价(元)</td>
                                    <td class="td name_4" style="widtd: 10%;">金额(元)</td>
                                </tr>
                                <tr class="trs">
                                    <td><textarea class="textareas add1 suppliesName" type="text"></textarea></td>
                                    <td><textarea class="textareas add2 specificationModel" type="text"></textarea></td>
                                    <td class="num-pallets"><input class="inputs num num-pallets-input" type="number"/></td>
                                    <td class="price-per-pallet"><input class="inputs price" type="number" /></td>
                                    <td class="row-total"><input class="inputs money row-total-input" type="number" disabled="disabled"/></td>
                                </tr>
                                <tr class="trs">
                                    <td><textarea class="textareas add1 suppliesName" type="text" name="homeDuty" style="" placeholder=""></textarea></td>
                                    <td><textarea class="textareas add1 specificationModel" type="text" name="homeDuty" style="" placeholder=""></textarea></td>
                                    <td class="num-pallets"><input class="inputs num num-pallets-input" type="number" name="num" id="num"  style=""placeholder=""/></td>
                                    <td class="price-per-pallet"><input class="inputs price" type="number" name="price" id="price" placeholder=""/></td>
                                    <td class="row-total"><input class="inputs money row-total-input" type="number" name="money" id="money" disabled="disabled"/></td>
                                </tr>
                                <tr class="trs">
                                    <td><textarea class="textareas add1 suppliesName" type="text" name="homeDuty" style="" placeholder=""></textarea></td>
                                    <td><textarea class="textareas add1 specificationModel" type="text" name="homeDuty" style="" placeholder=""></textarea></td>
                                    <td class="num-pallets"><input class="inputs num num-pallets-input" type="number" name="num" id="num"  style=""placeholder=""/></td>
                                    <td class="price-per-pallet"><input class="inputs price" type="number" name="price" id="price" placeholder=""/></td>
                                    <td class="row-total"><input class="inputs money row-total-input" type="number" name="money" id="money" disabled="disabled"/></td>
                                </tr>
                                
                            </table>

    <tr >
                                    <td colspan="1" style=" 73px;border:1px solid #000;border-top: 0px;"><label class="font36">金额合计</label></td>
                                    <td colspan="3" style="border:1px solid #000;border-top: 0px;"><input class="inputs" type="text" name="homeDuty" id="totalMoney"  style="" disabled="disabled"/></td>
                                    
                                </tr>

    js代码

    //实时监测input中值的变化
                $('input').bind('input propertychange', function(){
                    $(".trs").each(function (index, element) {
                        var num = $.trim($(this).find('.num').val());
                        var price = $.trim($(this).find('.price').val());
                        
                        $(this).find('.money').val((num * price));
                    });
                         
                    var money = 0;
                    $(".money").each(function(){
                        money+=(parseFloat($(this).val())?parseFloat($(this).val()):0);
                    });
                    $("#totalMoney").val(money);
                });
  • 相关阅读:
    day24.魔术方法 __del__ __str__ __repr __call__ __bool__ __len__ \__add__
    Hibernate事务管理
    Hibernate持久化类和Hibernate持久化对象状态
    LeetCode-Largest Rectangle in Histogram
    LeetCode-Word Break
    LeetCode-Spiral Matrix
    LeetCode-Spiral Matrix II
    LeetCode-Binary Tree Zigzag Level Order Traversal
    LeetCode-Multiply Strings
    LeetCode-Copy List with Random Pointer
  • 原文地址:https://www.cnblogs.com/liaohongwei/p/13895378.html
Copyright © 2020-2023  润新知