<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
table{
width: 500px;
text-align: center;
margin: 100px auto;
}
</style>
</head>
<body>
<table border="1" cellspacing="0">
<tbody id="tBo">
<tr style="background: #CDCDCD;">
<th>商品名称</th>
<th>数量</th>
<th>单价</th>
<th>操作</th>
</tr>
</tbody>
<tfoot >
<tr>
<td colspan="4" style="text-align: center">
<input type="button" value="增加订单" id="oIp">
</td>
</tr>
</tfoot>
</table>
<script>
window.onload=function () {
let oIp=document.getElementById("oIp"); //input
let tBo=document.getElementById("tBo"); //tbody
oIp.onclick=tsst; //按钮点击事件
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");
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 () {
let txt=tD1.innerText;
let input=("<input type='text' value='" + txt + "'/>");
tD1.innerHTML=input;
let oInpt=tD1.getElementsByTagName("input")[0];
oInpt.onblur=function () {
let newtext=this.value;
tD1.innerText=newtext;
}
})
}
}
</script>
</body>
</html>
相关文章：