输入框内的数值增加与减少

输入框内的数值增加与减少

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

使用js实现点击+号增加、-号减少数量

下面是使用js创建按钮HTML的代码

function Quantity(record, rowIndex, colIndex, options) {
            var CommodityID = record.CommodityID;
            return '<div class="tableText" style="width: 80px;margin:auto">'
                + '<div class="tableButtonArea">'
                 + '<div class="count">'
                + '<span class="short" onclick="Reduce(' + CommodityID + ')"></span>'
                + '<span class="inputNum"><input name="TxgoodsNum" type="text" onblur="txtblur(' + CommodityID + ')" id="inputQuantity' + CommodityID + '" class="inputText" style="text-align: center; padding: 5px 0px; width: 78px;" value=""></span>'
                + '<span class="plus" onclick="AddCommodity(' + CommodityID + ')"></span>'
                + '</div>'
                + '</div>'
                + '</div>'
        }

 

先在函数外面声明一个变量CommodityId，用于判断数字为空或者当前的CommodityId等于输入框内的值时，按正常+1数量增加，增加后又将新的CommodityID赋值给CommodityId，这样才能保证下次点击增加时两个值相等

var CommodityId;
        function AddCommodity(CommodityID) {
            var Num = $("#inputQuantity" + CommodityID + "").val();
            var reg = /^[0-9]*$/;
            if (Num == "") {
                var Check = (CommodityID % 5) - 1;
                var check = $("#tabCommodityTable").find("tr").find("td").find(".bsgrid_editgrid_check").eq(Check);
                $(check).prop('checked', true);
            }
            if (reg.test(Num)) {
                if (Num == "" || CommodityID == CommodityId) {
                    Num++;
                    if (CommodityID == CommodityId) {
                        $("#inputQuantity" + CommodityID + "").val(Num);
                    }
                    else {
                        Num = 1;
                        $("#inputQuantity" + CommodityID + "").val(Num);
                    }
                    CommodityId = CommodityID;
                }
                else {
                    Num++;
                    Num = $("#inputQuantity" + CommodityID + "").val(Num);
                }
            }
            else {
                layer.alert("请输入有效的数字！", { icon: 0, title: "提示" });
                $("#inputQuantity" + CommodityID + "").val("");
            }
        }

下面是减少数量的操作，跟增加数量原理基本一致

function Reduce(CommodityID) {
            var Numbers = $("#inputQuantity" + CommodityID + "").val();
            if (Numbers == 1 || Numbers == 0) {
                var Checks = (CommodityID % 5) - 1;
                var check = $("#tabCommodityTable").find("tr").find("td").find(".bsgrid_editgrid_check").eq(Checks);
                $(check).prop('checked', false);
            }
            var reg = /^[0-9]*$/;
            if (reg.test(Numbers)) {
                if (Numbers != "" && Numbers > 1) {
                    Numbers--;
                    $("#inputQuantity" + CommodityID + "").val(Numbers);
                }
                else {
                    $("#inputQuantity" + CommodityID + "").val("")
                }
            }
            else {
                layer.alert("该数字不是有效的数字！", { icon: 0, title: "提示" });
                $("#inputQuantity" + CommodityID + "").val("")
            }
        }

当输入框不是有效数字时，点击增加或减少数量会出现bug，这时我们就要通过正则验证输入框是否为有效数字，如果不是就清空输入框并提示

代码见下：

function txtblur(CommodityID) {
            var Num = $("#inputQuantity" + CommodityID + "").val();
            var CommodityId = CommodityID;
            var reg = /^-?[1-9]+[0-9]*$/;
            if (CommodityID > 5) {
                CommodityID %= 5;
            }
            if (reg.test(Num) || Num == "" || Num == 0) {
                var Check = CommodityID - 1;
                if (Num > 0) {
                    var check = $("#tabCommodityTable").find("tr").find("td").find(".bsgrid_editgrid_check").eq(Check);
                    $(check).prop('checked', true);
                }
                else {
                    var check = $("#tabCommodityTable").find("tr").find("td").find(".bsgrid_editgrid_check").eq(Check);
                    $(check).prop('checked', false);
                    Num = $("#inputQuantity" + CommodityId + "").val("");
                }
            }
            else {
                layer.alert("请输入有效的数字！", { icon: 0, title: "提示" });
                $("#inputQuantity" + CommodityID + "").val("");
            }
        }