增加和删除订单

最新推荐文章于 2022-04-27 09:41:00 发布

Tangayi

最新推荐文章于 2022-04-27 09:41:00 发布

阅读量1.9k

点赞数 1

本文链接：https://blog.csdn.net/Tangayi/article/details/81085771

版权

<title>增加和删除订单</title>
<style type="text/css">
body{
	font-size:13px;
	line-height:25px;
	}
table{
	border-top: 1px solid #333;
	border-left: 1px solid #333;
	width:800px;
}
td{
	border-right: 1px solid #333;
	border-bottom: 1px solid #333;
	text-align:center;
	}
.title{	
	font-weight:bold;
	background-color: #cccccc;
}
      
</style>
</head>

<body>
<table border="0" cellspacing="0" cellpadding="0" id="order">
  <tr class="title">
    <td>商品名称</td>
    <td>数量</td>
    <td>价格</td>
    <td>操作</td>
  </tr>
  <tr id="del1">
    <td>防滑真皮休闲鞋</td>
    <td>12</td>
    <td>&yen;568.50</td>
    <td><input name="rowdel" type="button" value="删除" onclick='delRow()' /></td>
  </tr>
  <tr>
    <td colspan="4" style="height:30px;">
    <input  name="addOrder" type="button" value="增加订单" onclick='addRow()' /></td>
  </tr>
</table>

<script type="text/javascript">
	function addRow(){
		var tab = document.querySelector("table tbody");
		var lastTr = tab.querySelector("tr:last-child");
		var newtr =document.createElement("tr");
		newtr.innerHTML ='<td><input  type="text" name="goodsName"/></td>'
			+'<td><input  type="text" name="goodsNum"/></td>'
			+'<td><input  type="text" name="goodsPrice"/></td>'
			+'<td><input name="rowdel" type="button" value="删除" onclick="delRow(event)" />'
			+'<input name="edit" type="button" value="确定" onclick="editRow(event)" /></td>';
		tab.insertBefore(newtr,lastTr);
	}
	function delRow(e){
		var btn = e.target;
		var xg = btn.parentElement;//根据btn获取Td
		var xgTr = xg.parentElement;//获取Tr
		xgTr.remove();//通过remove删除Tr
		
	}
	
	function editRow(e){

		//获取确定按钮
		var btn = e.target;
		if(btn.value == "确定"){
			btn.value = "修改";//当按钮是确定的时候，点击它为修改
			var lastTd = btn.parentElement;//td是btn的子节点
			var priceTd = lastTd.previousSibling;
			var price = priceTd.querySelector("input").value;
			priceTd.innerHTML=(price);
			
			
			var numTd = priceTd.previousSibling;//获取价格前一个Td
			var num = numTd.querySelector("input").value;
			numTd.innerHTML=(num);
			
			
			var nameTd = numTd.previousSibling;
			var name = nameTd.querySelector("input").value;
			nameTd.innerHTML=(name);
		}else{
			btn.value = "确定";
			var lastTd = btn.parentElement;//td是btn的子节点
			var priceTd = lastTd.previousSibling;
			var price = priceTd.innerHTML;
			console.log(price);
			priceTd.innerHTML ='<input  type="text" name="goodsPrice" value= "'+price+'" />';
			
			var numTd = priceTd.previousSibling;//获取价格前一个Td
			var num = numTd.innerHTML;
			numTd.innerHTML = '<input  type="text" name="goodsNum" value= "'+num+'"/>';
			
			
			var nameTd = numTd.previousSibling;
			var name = nameTd.innerHTML;
			nameTd.innerHTML = '<input  type="text" name="goodsName" value= "'+name+'"/>';
	}
		}
</script>
</body>

Tangayi

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
增加和删除订单

&lt;title&gt;增加和删除订单&lt;/title&gt;&lt;style type="text/css"&gt;body{ font-size:13px; line-height:25px; }table{ border-top: 1px solid #333; border-left: 1px solid #333; width:800px;}td{ bo...
复制链接

扫一扫