增加和删除订单-CSDN博客

本文链接：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>