订单的初步静态模型

最新推荐文章于 2024-02-19 10:33:47 发布

Mjh0801

最新推荐文章于 2024-02-19 10:33:47 发布

阅读量326

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/Mjh0801/article/details/99725020

版权

html 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

1.add.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<BODY>
<TABLE border="1" width="100%">
<TR>
	<TD>编号：<input type="text" /></TD>
	<TD>名称：<input type="text" /></TD>
</TR>
<TR>
	<TD>价格：<input type="text" /></TD>
	<TD>操作员：<input type="text" /><a href="#" onclick="f();return false;">添加产品</a></TD>
</TR>
</TABLE>
<table id="tb">

</table>
总价：<label id="total"> </label>
</BODY>
</HTML>
<SCRIPT LANGUAGE="JavaScript">
	function f(){
		window.showModalDialog("pro.html",window,"dialogWidth=200px;dialogHeight=200px");
	}
	function sum(){
		var tb=document.getElementById("tb");
		var sum=0;
		for(var i=0;i<tb.rows.length;i++){
			sum=sum+parseFloat(tb.rows(i).cells[4].firstChild.nodeValue);
		}
		document.getElementById("total").firstChild.nodeValue=sum;
	}
	function remove_(v){
		var rowIndex=v.parentNode.rowIndex;
		var tb=document.getElementById("tb");
		tb.deleteRow(rowIndex);
		sum();
	}
	function compu(v){
		var op=v.innerHTML;
		var num=parseInt(v.parentNode.childNodes[1].value);
		if(op=="+"){
			num=num+1;
		}else if(op=="-"){
			if(num<=1){
			num=1;
			return;
			}
			num=num-1;
		}
		v.parentNode.childNodes[1].value=num;

		var price=parseFloat(v.parentNode.parentNode.cells[2].firstChild.nodeValue);
		v.parentNode.parentNode.cells[4].firstChild.nodeValue=price*num;
		sum();

	}
	//去重，如果重复的话就直接加一
	function re(v){
		var flag=true;
		var tb=document.getElementById("tb");
		for (var i=0;i<tb.rows.length ;i++ )
		{
			if(v==tb.rows(i).cells[0].firstChild.nodeValue){
				compu(tb.rows(i).cells[3].childNodes[2]);
				flag=false;
			break;
			}
		}
		return flag;
	}
	//改变文本框中的数字，也能够改变总额以及小计
	function price(){
		var tb=document.getElementById("tb");
		for (var i=0;i<tb.rows.length ;i++ )
		{
			var num=parseInt(tb.rows(i).cells[3].childNodes[1].value);
			var price=parseFloat(tb.rows(i).cells[2].firstChild.nodeValue);
			tb.rows(i).cells[4].firstChild.nodeValue=price*num;
		}
		sum();
	}
	//每隔5秒重复调用一次price函数
	setInterval('price()',5000);
</SCRIPT>

2.pro.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<SCRIPT LANGUAGE="JavaScript">
	function f(v){
		var parWin=window.dialogArguments;
		var tb=parWin.document.getElementById("tb");
		tb.width=600;
		tb.border=1;
				if(parWin.re(v.getAttribute("pno"))){
				var new_row=tb.insertRow();
					new_row.align="center";

					var cel_1=new_row.insertCell(0);
					cel_1.innerHTML=v.getAttribute("pno");

					var cel_2=new_row.insertCell(1);
					cel_2.innerHTML=v.getAttribute("pname");

					var cel_3=new_row.insertCell(2);
					cel_3.innerHTML=v.getAttribute("price");

					var cel_4=new_row.insertCell(3);
					cel_4.innerHTML='<a href="#" onclick="compu(this);return false;">-</a><input type="text" name="num" id="num" value="1" size="3" /><a href="#" onclick="compu(this);return false;">+</a>';

					var cel_5=new_row.insertCell(4);
					cel_5.innerHTML=v.getAttribute("price");

					var cel_6=new_row.insertCell(5);
					cel_6.innerHTML='<a href="#" onclick="remove_(this);return false;">移除</a>';

					parWin.sum();
			}
	}
</SCRIPT>
</HEAD>
<BODY>
<TABLE border="1" width="300" align="center">
<TR>
	<TD>编号</TD>
	<TD>名称</TD>
	<TD>价格</TD>
</TR>
<TR>
	<TD>001</TD>
	<TD><a href="#" pno="001" pname="苹果" price="15" onclick="f(this);return false;" >苹果</a></TD>
	<TD>15</TD>
</TR>
<TR>
	<TD>002</TD>
	<TD><a href="#" pno="002" pname="香蕉" price="5" onclick="f(this);return false;" >香蕉</a></TD>
	<TD>5</TD>
</TR>
<TR>
	<TD>003</TD>
	<TD><a href="#" pno="003" pname="西瓜" price="1" onclick="f(this);return false;" >西瓜</a></TD>
	<TD>1</TD>
</TR>
</TABLE>
</BODY>
</HTML>

再次改进过得静态模型，就是丑了点。进行文本框的数据改动时，我写的是每隔一段时间就调用一次那个函数，但是我希望的是我进行改动之后调用一次，不改动不调用不刷新，目前没想出来怎么写，等之后进行优化。