js通过加减按钮动态添加减少标签(sku)

最新推荐文章于 2024-10-07 17:50:34 发布

我风依旧

最新推荐文章于 2024-10-07 17:50:34 发布

阅读量1.6k

点赞数

分类专栏： jQueryEasyUI 文章标签： sku javaScript html jQueryEasyUI 加减按钮

本文链接：https://blog.youkuaiyun.com/awangwu/article/details/82813302

版权

jQueryEasyUI 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了如何使用JavaScript和jQuery EasyUI实现动态添加和减少SKU标签的功能。重点在于字符串拼接变量时需要注意的HTML识别问题，确保使用正确的引号转义方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

仿sku

//jsp

 <input type="button" value="-" id="subtraction" style="width: 40px;height: 35px;font-size: 20px" onclick="subtraction()"></input>
 <input type="text" value="0" id="number" onBlur="number()" readonly="readonly" style="width: 80px;height: 35px"></input>
 <input type="button" value="+" id="add" style="width: 40px;height: 35px;font-size: 20px" onclick="add2()"></input>

//js

//1:减号按钮点击事件

function subtraction(){
   // alert("减")
    //获取-号按钮
    var subtraction = document.getElementById("subtraction");
    //获取文本框
    var number = document.getElementById("number");
    if (number.value<=0) {
        //如果文本框的值小于1,则设置值为1
        number.value = 0;
    }else {
        number.value = number.value - 1;
        //删除第一行
        $("#pdTable").find("tr:last").remove();//find()获取标签的后代 :last最后一个选择器  tr:last 最后一个tr标签
        //删除第二行
        $("#pdTable").find("tr:last").remove();//find()获取标签的后代 :last最后一个选择器  tr:last 最后一个tr标签
    //删除所有行 $("#pdTable").find("tr").remove(); 
    // $.parser.parse($("#pdTable"));//重新渲染标签,解决按钮样式失效
    }
}
//2:文本框离开焦点事件
function number(){
    var number = document.getElementById("number");
    var value = number.value;
    //如果文本值为空,设置为1
    if (value=="") {
        number.value = 1;
    }
    //如果文本值为非纯数字,设置为1
    //isNaN()是否为非法数字
    if (isNaN(value)) {
        number.value = 1;
    }
    //如果文本值小于1,设置为1
    if (parseInt(value)<=1) {
        number.value = 1;
    }
}
//3:加号按钮点击事件

function add2(){
    //alert("加")
    var add = document.getElementById("add");
    var number = document.getElementById("number");
    //parseInt() 将数值型字符串转换为数值
    number.value = parseInt(number.value)+1;
    var 变量="变量前缀"+number.value;
    var str="拼接的字符串标签";
    $("#pdTable").append(str);
    $.parser.parse($("#pdTable"));//重新渲染标签,解决按钮样式以及插件失效
}

注意:字符串拼接变量时

正确:

\""+变量+"\" //必须转义外层引号否则html不识别会把引号当做变量

错误:

"+变量+" //必须是双引号并且需要转义外层引号否则html不识别会把引号当做变量