javascript - js改变的value如何监听

问题描述

问 题

效果图如下

每行的小计是通过订购数量*单价算出来 通过jquery动态改变的
开始吧 在html中触发

        <div class="form-froup">
            <p class="col-md-12"><strong>商品名称:</strong></p>
            <p class="col-md-12">
                <a class="btn btn-sm btn-primary" href="javascript:void(0)" onclick="order.addProduct()">
                    <span class="glyphicon glyphicon-plus">
                        添加商品
                    </span>
                </a>
            </p>
            <div class="col-md-12">
                <table id="tblproduct" class="table table-bordered  listTable" cellpadding="0" cellspacing="0" style="table-layout:fixed">
                    <thead>
                    <tr>
                        <th width="60">
                            序号
                        </th>
                        <th >商品</th>
                        <th >规格</th>
                        <th >单位</th>
                        <th >可售库存</th>
                        <th >订购数量</th>
                        <th >单价</th>
                        <th >小计</th>
                        <th >备注</th>
                        <th width="90px" >操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td class="productOrderNum"></td>
                        <td>
                            <select name="productname" class="productselect productName" style=" width:130px" >
                            </select>
                        </td>
                        <td>
                            <input class="productSpec form-control" type="text"readonly >
                        </td>
                        <td>
                            <input class="productUnit form-control" type="text" readonly>
                        </td>
                        <td>
                            <input class="productStock form-control" type="number" readonly >
                        </td>
                        <td>
                            <input class="productQuanity form-control"  type="number" onchange='totalProduct(this);subProductPrice(this)'>
                        </td>
                        <td>
                            <input class="productPrice form-control"  type="number" >
                        </td>
                        <td>
                            <input data-name="subProductPrice" class=" form-control subProductPrice" type="text" onchange="totalProductPrice(this)" >
                        </td>
                        <td>
                            <input class="productRemark form-control"  type="text">
                        </td>
                        <td>
                            <!--<a class="btn btn-sm btn-primary " href="javascript:void(0)" onclick="order.addProduct()">新增</a>-->
                            <a class="btn btn-sm btn-danger del" href="javascript:void(0)" onclick="delproduct(this)" >删除</a>
                        </td>
                    </tr>
                    <tr>
                        <td id="totalProduct">合计</td>
                        <td data-name="productVarieties"></td>
                        <td></td>
                        <td></td>
                        <td data-name="productStockTotal"></td>
                        <td data-name="productQuanityTotal" ></td>
                        <td></td>
                        <td data-name="totalProductPrice"></td>
                        <td></td>
                        <td></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

js如下

//行内金额小计
function subProductPrice(obj) {
    var total = 0;
    if ($(obj).val() != '' && $(obj).val() != null && $(obj).val() != undefined) {
        total += parseInt($(obj).val()) * parseInt($(obj).parents('tr').find('.productPrice').val());

    }
    $(obj).parents('tr').find("[data-name='subProductPrice']").val(total);
}
function subGiftPrice(obj) {
    var total = 0;
    if ($(obj).val() != '' && $(obj).val() != null && $(obj).val() != undefined) {
        total += parseInt($(obj).val()) * parseInt($(obj).closest(".giftPrice").val());
    }
    $(obj).find("[data-name='giftPriceTotal']").text("￥" + total)
}
//金额总计


function totalProductPrice(obj) {
    var total=0;
    // console.log( $('#tblproduct .subProductPrice').val())
    $('#tblproduct .subProductPrice').each(function () {
        if($(this).val() != '' && $(this).val() != null && $(this).val() != undefined) {
            total += parseInt($(this).val())
        }
    })

    $("[data-name='totalProductPrice']").text('￥'+total)
}
function totalGiftPrice(obj) {
    var total=0;
    $('#tblgift .subGiftPrice').each(function () {
        if($(obj).text() != '' && $(obj).text() != null && $(obj).text() != undefined) {
            total += parseInt($(obj).text())
        }
    })
    $("[data-name='totalGiftPrice']").text('￥'+total)
}

由于是js改变的value所以onchange不好用了 onproperty又只支持ie onpinput也不行
请问怎么办 才能监听到小计的变化从而改变总金额
求大神指点

解决方案

归根结底还是由用户的点击行为触发的，你可以给可能改变总计的鼠标事件都调用一个重算总价的方法。

这篇关于javascript - js改变的value如何监听的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！