<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>¥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>
效果图：
