修改订单

最新推荐文章于 2022-04-10 17:37:31 发布

chaoyv

最新推荐文章于 2022-04-10 17:37:31 发布

阅读量497

点赞数

分类专栏： JS 粗浅文章标签： xhtml javascript ViewUI

本文链接：https://blog.csdn.net/chaoyv/article/details/84509039

版权

JS 粗浅专栏收录该内容

48 篇文章 2 订阅

订阅专栏

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<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:400px;
}
td{
	border-right: 1px solid #333;
	border-bottom: 1px solid #333;
	text-align:center;
	}
.title{	
	font-weight:bold;
	background-color: #cccccc;
}
input text{
	width:100px;
}   
</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="删除" οnclick="deleteRow(this);"  />
    <input id="edit1" type="button" value="修改" οnclick="updateRow(this);" /></td>
  </tr>
  <tr>
    <td colspan="4" style="height:30px;">
    <input name="addOrder" type="button" value="增加订单" /></td>
  </tr>
</table>
<script type="text/javascript">
function $(id){
	return document.getElementById(id);
}
var table=$("order");
window.οnlοad=function(){
	//给“增加订单”注册点击事件
	document.getElementsByName("addOrder").item(0).οnclick=addOrder;
}
//增加订单
function addOrder(){
	var oldTr=table.rows[table.rows.length-2];
	var newTr=table.insertRow(table.rows.length-1);
	newTr.insertCell(0).innerHTML=oldTr.cells[0].innerHTML;
	newTr.insertCell(1).innerHTML=oldTr.cells[1].innerHTML;
	newTr.insertCell(2).innerHTML=oldTr.cells[2].innerHTML;
	newTr.insertCell(3).innerHTML=oldTr.cells[3].innerHTML;
}
//删除行
function deleteRow(obj){
	var rowIndex=obj.parentNode.parentNode.rowIndex;
	if(confirm('是否要修改！')){
		table.deleteRow(rowIndex);
	}
}
//修改行
function updateRow(obj){
	var rowIndex=obj.parentNode.parentNode.rowIndex;
	var cell=table.rows[rowIndex].cells[1];
	var num=cell.innerHTML;
	cell.innerHTML="<input type='text' name='number' value='"+num+"' style='width:30px'/>";
	obj.value="确定";
	obj.οnclick=function(){
		okRow(this);
	}
}
//确定事件
function okRow(obj){
	var rowIndex=obj.parentNode.parentNode.rowIndex;
	var cell=table.rows[rowIndex].cells[1];
	var num=cell.firstChild.value;
	cell.innerHTML=num;
	obj.value="修改";
	obj.οnclick=function(){
		updateRow(this);
	}
}
</script>
</body>
</html>

效果图：