<body>
<table width="481" border="0" cellspacing="0" cellpadding="0" id="order">
<tr class="title">
<td width="208">商品名称</td>
<td width="41">数量</td>
<td width="49">单价</td>
<td width="46">小记</td>
<td width="115">操作</td>
</tr>
<tr >
<td>拉菲中级庄岩石古堡6支装</td>
<td>1</td>
<td>¥1399</td>
<td>1399</td>
<td><input name="del" type="button" value="删除" /><input name="edit" type="button" value="修改" /></td>
</tr>
<tr>
<td style="text-align:center; height:30px;" colspan="5">
总计:¥1399
</td>
</tr>
<tr>
<td style="text-align:center; height:30px;" colspan="5">
<input id="add" type="button" value="增加订单" /></td>
</tr>
</table>
</body>
js:
window.onload=init;
function init(){
var addObj=document.getElementById("add");
addObj.onclick=addRow;
var delObjs=document.getElementsByName("del");
for(var i=0;i<delObjs.length;i++){
delObjs[i].onclick=delRow;
}
var editObjs=document.getElementsByName("edit");
for(var i=0;i<editObjs.length;i++){
editObjs[i].onclick=editRow;
}
}
function addRow(){
var addTable=document.getElementById("order");
var row_index=addTable.rows.length-2;
var newRow=addTable.insertRow(row_index);
var col1=newRow.insertCell(0);
col1.innerHTML="<input style='width:160px;' type='text'/>";
var col2=newRow.insertCell(1);
col2.innerHTML="<input style='width:30px;' type='text'/>";
var col3=newRow.insertCell(2);
col3.innerHTML="<input style='width:50px;' type='text'/>";
var col4=newRow.insertCell(3);
col4.innerHTML="";
var col5=newRow.insertCell(4);
col5.innerHTML='<input name="del" type="button" value="删除" />';
col5.innerHTML=col5.innerHTML+'<input name="edit" type="button" value="确定" />';
col5.firstChild.onclick=delRow;
col5.lastChild.onclick=editOK;
}
function delRow(){
var rowIdx=this.parentNode.parentNode.rowIndex;
var flag=window.confirm("要删除第"+(rowIdx)+"行?");
if(flag==true){
var tabObj=document.getElementById("order");
tabObj.deleteRow(rowIdx);
}
}
function editRow(){
this.value="确定";
var tr=this.parentNode.parentNode;
var col=tr.cells;
var texta=col[0].innerHTML;
col[0].innerHTML="<input style='width:160px;' type='txt' value='"+texta+"' />"
var textb=col[1].innerHTML;
col[1].innerHTML="<input style='width:30px;' type='txt' value='"+textb+"' />"
var textc=col[2].innerHTML;
col[2].innerHTML="<input style='width:50px;' type='txt' value='"+textc+"' />"
this.onclick=editOK;
}
function editOK(){
this.value="修改";
var tr=this.parentNode.parentNode;
var col=tr.cells;
var texta=col[0].firstChild.value;
var textb=col[1].firstChild.value;
var textc=col[2].firstChild.value;
col[0].innerHTML=texta;
col[1].innerHTML=textb;
col[2].innerHTML=textc;
col[3].innerHTML="¥"+parseFloat(textb)*parseFloat(textc.substr(1,textc.length-1));
var addTable=document.getElementById("order");
var total=0;
for(var i=1;i<addTable.rows.length-2;i++){
var count=addTable.rows[i].cells[3].innerHTML;
total+=parseFloat(count.substr(1,count.length-1));
}
addTable.rows[addTable.rows.length-2].cells[0].innerHTML="总计:¥"+total;
this.onclick=editRow;
}