js通過加減按鈕動態添加減少標籤(sku)

仿sku

//jsp

 <input type="button" value="-" id="subtraction" style="width: 40px;height: 35px;font-size: 20px" οnclick="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" οnclick="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不識別會把引號當做變量