商品的添加、删除和修改

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
td, th {
height: 40px;
line-height: 25px;
width: 250px;
font-size: 25px;
}

.active {
border: none;
outline: none;
}
</style>
</head>
<body>
<table border="1" cellspacing="0" style="text-align: center;">
<tr style="background: #ccc">
<th>商品名称</th>
<th>数量</th>
<th>单价</th>
<th>操作</th>
</tr>
<tbody id="table">
<tr>
<td>玫瑰保湿睡眠面膜</td>
<td>5</td>
<td>¥48</td>
<td>
<input type="button" value="删除" onclick="remove(this)">
<input type="button" value="修改" onclick="change(this)">
</td>
</tr>
<tr>
<td colspan="4"><input type="button" value="增加订单" id="btn"></td>
</tr>
</tbody>
</table>
<script>
//声明按钮
var oBtn = document.getElementById("btn");
// 声明主体
var oTab = document.getElementById("table");
//按钮点击发生事件函数
oBtn.onclick = function () {
// 声明一个新的tr 创建一个新的tr为oTr
var oTr = document.createElement("tr");
// 新的tr oTr的主体是什么
// 后面的onclick为指定函数remove 点击触发函数remove
// 后面第二个的onclick为指定函数change 点击触发函数change
oTr.innerHTML =
"<td>玫瑰保湿睡眠面膜</td>"+"<td>5</td>"+"<td>¥48</td>"+
"<td><input type='button' class='del' value='删除' onclick='remove(this)'>"+" "+
"<input type='button' value='修改' onclick='change(this)'></td>";
// 将创建的oTr放到oTab的最后一个元素前面
oTab.insertBefore(oTr, oTab.lastElementChild);

};

//函数remove 后面为函数参数
function remove(that) {
//删除oTab的节点括号中that指的是当前的按钮，括号中的意思是这个按钮的父节点的父节点
oTab.removeChild(that.parentNode.parentNode)

}

//函数change that指的是对应函数的元素
function change(that) {
// 当前按钮的value值变成确认
that.value = "确认";
//声明创建一个新的input
var Ipt = document.createElement("input");
//定义新的input的类名和属性属性在前面的style中
Ipt.className = "active";
//新的input的value值为这个元素父节点的父节点的一个元素的内容
Ipt.value = that.parentNode.parentNode.firstElementChild.innerHTML;
// 让这个父节点的父节点的第一个元素内容为空
that.parentNode.parentNode.firstElementChild.innerHTML = "";
// 将前面的新input放入父节点的父节点的第一个元素

that.parentNode.parentNode.firstElementChild.appendChild(Ipt);

//当这个按钮在value为确认情况下被点击时的函数
that.onclick = function () {
//函数sure生效下面是对应的sure函数
sure(this)
}

};

//定义一个函数sure
function sure(that) {
// 将第一个元素的内容赋值给otd
var otd = that.parentNode.parentNode.firstElementChild;
//将这个按钮的value值变成修改
that.value = "修改";
// 将前面input中的value值赋给otd
otd.innerHTML = otd.firstElementChild.value;
//再次点击该按钮是触发的函数
that.onclick = function () {
//这个按钮触发之后，实行函数change
change(this)
}
}
</script>
</body>
</html>

商品的添加、删除和修改

猜你喜欢