添加商品和修改信息！

最新推荐文章于 2023-04-11 09:36:33 发布

原创最新推荐文章于 2023-04-11 09:36:33 发布 · 2.6k 阅读

CC 4.0 BY-SA版权

<!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;
	font-size: 25px;
	text-align: center;
	}
	</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");
	// 声明主体
	var i = 0;
	//声明一个变量i等于0
	oBtn.onclick = function () {
	//按钮点击发生事件函数
	i++;
	// 按钮被点击一次i加一
	var oTr = document.createElement("tr");
	// 声明一个新的tr 创建一个新的tr为oTr
	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>
	`
	// 新的tr oTr的主体是什么 // 后面的onclick为指定函数remove 点击触发函数remove
	// 后面第二个的onclick为指定函数change 点击触发函数change
	oTab.insertBefore(oTr, oTab.lastElementChild);
	// 将创建的oTr放到oTab的最后一个元素前面
	}


	function remove(that) {
	//函数remove 后面为函数参数
	console.log(that);
	// 打印出删除的数据点击remove发生的事件
	oTab.removeChild(that.parentNode.parentNode)
	//删除oTab的父节点的父节点指的就是前面加的tr
	}

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

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

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

	</script>
	</body>
	</html>