JavaScript（web）简易购物车

最新推荐文章于 2022-05-11 20:27:17 发布

莫白媛

最新推荐文章于 2022-05-11 20:27:17 发布

阅读量1k

点赞数

分类专栏： JavaScript web 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_46579394/article/details/122732283

版权

web 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

JavaScript

1 篇文章 0 订阅

订阅专栏

<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>&yen;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">
    总计：&yen;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="&yen;"+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="总计：&yen;"+total;
		this.onclick=editRow;
}