实时监测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);
            });
原文地址:https://www.cnblogs.com/liaohongwei/p/13895378.html