通过单击添加增加订单来实现添加新的商品,删除可以删除当前行,点击修改可以更改此行的商品名称、数量、单价。
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;//将选中修改按钮父级的前三个选项变成不可编辑,将开关打开
}
})
}
}