基于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;//将选中修改按钮父级的前三个选项变成不可编辑，将开关打开

            }
        })
    }
}