基於dom操作的簡易商品欄練習

通過單擊添加增加訂單來實現添加新的商品，刪除可以刪除當前行，點擊修改可以更改此行的商品名稱、數量、單價。

window.οnlοad=function () {
    let oIp=document.getElementById("oIp");//用增加訂單的id獲取
    let tBo=document.getElementById("tBo");//用tbody的id獲取
    oIp.οnclick=tsst;//單擊增加新的訂單
    tsst();//默認打開生成第一行
    function tsst() {
        let oTr=document.createElement("tr");
        let tD1=document.createElement("td");
        let tD2=document.createElement("td");
        let tD3=document.createElement("td");
        let tD4=document.createElement("td");
        let bTn1=document.createElement("input");
        let bTn2=document.createElement("input");
        let cot=true;//用於製作修改按鈕的開關
        tD1.innerHTML="玫瑰保溼睡眠面膜";
        tD2.innerHTML="5";
        tD3.innerHTML="$48";
        bTn1.type="button";
        bTn2.type="button";
        bTn1.value="刪除";
        bTn2.style.marginLeft="5px";
        bTn2.value="修改";
        oTr.appendChild(tD1);
        oTr.appendChild(tD2);
        oTr.appendChild(tD3);
        oTr.appendChild(tD4);
        tD4.appendChild(bTn1);
        tD4.appendChild(bTn2);
        tBo.appendChild(oTr);//添加新的商品行
        bTn1.addEventListener("click",function () {
            tBo.removeChild(oTr);//使每個新增加的商品刪除按鈕，獲得刪除父元素的效果
        });
        bTn2.addEventListener("click",function () {
            if (cot==true){
                tD1.innerHTML=("<input type='text' style='width: 125px;' value='" + tD1.innerText + "'/>");
                tD2.innerHTML=("<input type='text' style='width: 10px' value='" + tD2.innerText + "'/>");
                tD3.innerHTML=("<input type='text' style='width: 20px' value='"+tD3.innerText+"'/>");
                bTn2.value="確定";//將修改按鈕的文本改爲確定
                cot=false;//將選中修改按鈕父級的前三個選項變成可編輯，並將開關關閉
            }else if (cot==false){
                tD1.innerText=tD1.getElementsByTagName("input")[0].value;
                tD2.innerText=tD2.getElementsByTagName("input")[0].value;
                tD3.innerText=tD3.getElementsByTagName("input")[0].value;
                bTn2.value="修改";//將修改按鈕的文本改爲修改
                cot=true;//將選中修改按鈕父級的前三個選項變成不可編輯，將開關打開

            }
        })
    }
}