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

版权声明：本文为博主原创文章，创作不易转载请注明出处 https://blog.csdn.net/awangwu/article/details/82813302

//jsp

    <input type="button" value="-" id="subtraction" onclick="subtraction()"></input>
    <input type="text" value="1" id="number" onBlur="number()" readonly="readonly"></input>
    <input type="button" value="+" id="add" onclick="add2()"></input><br>

//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标签
       // $.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 str="拼接的字符串标签";
    $("#pdTable").append(str);
    $.parser.parse($("#pdTable"));//重新渲染标签,解决按钮样式以及插件失效
}