Product information uses JSON data to simulate
Click the same product multiple times, will not repeat the addition, but on the basis of the number of +1,
The number of items can also be entered manually, when the input 0 o'clock, the product will be automatically removed from the shopping cart (click the minus sign to less than 1 o'clock, will also indicate whether to remove the product information from the shopping cart)
The prices and the total price of each product are dynamically calculated based on the actions added and deleted
Attached DOWNLOAD Link:/201112/yuanma/jquery_gouwuche.rar
Basic features have been implemented, it is recommended to run with IE browser, other browsers do not test
HTML code:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> Untitled Document </title>
<body>
<H2 style= "Text-align:left" > Products List <table width= "border=" 0 "id=" tblproduct "cellpadding=" 1 "cellspacing=" 1 "bgcolor=" BLACK ">
<tr id= "Trmaster" bgcolor= "white" style= "Display:none" >
<td>
Item No: <span>000001</span><br/>
Name: <span>aa</span><br/>
Price: <span>2.5</span><br/>
Description: <span>aaaaa</span><br/>
<div style= "Text-align:right" ><input type= "button" Name= "Btnbuy" value= "buy"/></div>
</td>
<td>
Item No: <span>000001</span><br/>
Name: <span>aa</span><br/>
Price: <span>2.5</span><br/>
Description: <span>aaaaa</span><br/>
<div style= "Text-align:right" ><input type= "button" Name= "Btnbuy" value= "buy"/></div>
</td>
<td>
Item No: <span>000001</span><br/>
Name: <span>aa</span><br/>
Price: <span>2.5</span><br/>
Description: <span>aaaaa</span><br/>
<div style= "Text-align:right" ><input type= "button" Name= "Btnbuy" value= "buy"/></div>
</td>
<td>
Item No: <span>000001</span><br/>
Name: <span>aa</span><br/>
Price: <span>2.5</span><br/>
Description: <span>aaaaa</span><br/>
<div style= "Text-align:right" ><input type= "button" Name= "Btnbuy" value= "buy"/></div>
</td>
</tr>
</table>
<H2 style= "Text-align:left" > Shopping cart <table width= "border=" 0 "id=" Tblorder "cellpadding=" 1 "cellspacing=" 1 "bgcolor=" BLACK ">
<tr bgcolor= "White" ><td> serial number </td><td> number </td><td> name </td><td> Description < /td><td> Quantity </td><td> Unit </td><td> Total Price </td><td> Delete </td></tr>
<tr id= "Ordermarter" bgcolor= "white" style= "Display:none" >
<TD style= "width:5%" >1</td>
<TD style= "width:10%" >000001</td>
<TD style= "width:10%" >aa</td>
<td>aaaaa</td>
<TD style= "width:15%" >
<input type= "text" name= "Txtnum" style= "width:50px" value= "0" onkeyup= "this.value=this.value.replace (/\D/g,") " Onafterpaste= "This.value=this.value.replace (/\d/g, ')"/>
<input type= "button" Name= ' Btnadd ' style= ' width:15px; Text-align:center "value=" + "/>
<input type= "button" Name= ' btncut ' style= ' width:15px; Text-align:center "value="-"/>
</td>
<TD style= "width:10%" >0</td>
<TD style= "width:10%" ><font color= "Red" >0</font></td>
<TD style= "width:5%; Text-align:center "><input type=" button "Name= ' Btnremove ' style=" width:30px; Text-align:center "value=" X "/></td>
</tr>
</table>
<table width= "border=" 0 "id=" tbltotal "cellpadding=" 1 "cellspacing=" 1 "bgcolor=" BLACK ">
<tr bgcolor= "White" align= "right" >
<td> Total Price </td>
<TD id= "Tdtotal" ><font color= "#FF0000" size= "+1" face= "Arial, Helvetica, Sans-serif" >0.0</font> </td>
</tr>
</table>
</body>
JS Code
Copy Code code as follows:
<script type= "Text/javascript" src= "Https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" >< /script>
<script type= "Text/javascript" >
/*
@@
@@
@@
*/
var product=[
{prodId: "000001", ProdName: "AA", Price:2.5,description: "AAAAA"},
{prodId: "000002", ProdName: "BB", Price:2.4,description: "BBBBB"},
{prodId: "000003", ProdName: "CC", Price:2.3,description: "CCCCC"},
{prodId: "000004", ProdName: "DD", Price:2.2,description: "DDDDD"},
{prodId: "000005", ProdName: "ee", price:2.1,description: "Eeeee"},
{prodId: "000006", ProdName: "FF", Price:2.0,description: "Fffff"},
{prodId: "000007", ProdName: "GG", Price:1.9,description: "Ggggg"},
{prodId: "000008", ProdName: "hh", Price:1.8,description: "Hhhhh"},
{prodId: "000009", ProdName: "II", Price:1.7,description: "IIIII"}
];
</script>
<script type= "Text/javascript" >
var j=0,i=-1,k=-1,len=$ ("#trMaster TD"). Size ()//data and template TD can be customized, the format is correct
$.each (Product,function (Index,prod) {
i++;
k++;
if (i%len==0) {
j + +;
Clonetr (j);//clone rows based on template
}
if (K==len)
k=0;
SETTD (j,k,prod.prodid,prod.prodname,prod.price,prod.description);//TD Assignment to Clone row
});
Cloning rows according to template
function Clonetr (ID) {
$ ("#trMaster"). Clone (True). CSS ("Display", "block"). attr ("id", "tr" +id). Appendto ("#tblProduct");
$ ("#tr" +id+ "TD span"). empty ();
}
The TD assignment to the clone row
function Settd (trid,index,prodid,prodname,price,description) {
var tr=$ ("#tr" +trid);
$ (TR). Find ("Td:eq (" +index+) "). Find (" Span:eq (0) "). HTML (PRODID);
$ (TR). Find ("Td:eq (" +index+) "). Find (" Span:eq (1) "). HTML (prodname);
$ (TR). Find ("Td:eq (" +index+) "). Find (" Span:eq (2) "). HTML (price);
$ (TR). Find ("Td:eq (" +index+) "). Find (" Span:eq (3) "). HTML (description);
}
var tempid= "";
var num=0;
Click Buy
$ ("Input[name= ' btnbuy ']"). Click (function () {
var elem=$ (this). Parent () ();//Get Click Button's TD
var prodid=$ (elem). Find ("Span:eq (0)"). html ();
var prodname=$ (elem). Find ("Span:eq (1)"). html ();
var price=$ (elem). Find ("Span:eq (2)"). html ();
var description=$ (elem). Find ("Span:eq (3)"). html ();
if (prodid== "" | | prodid==null| | prodid==undefined) {
Alert ("Please click on other products");
}else{
if (Tempid.indexof (prodId)!=-1) {
if (Confirm (' already exists, OK number +1? ')) {
$ ("#tblOrder tr:gt (1)"). each (function () {
if ($ (this). Find ("Td:eq (1)"). html () ==prodid) {
var num=$ (this). Find ("Td:eq (4)"). Find ("Input[name= ' Txtnum ')"). attr ("value");
$ (this). Find ("Td:eq (4)"). Find ("Input[name= ' Txtnum ')"). attr ("value", +num+1);//equivalent to parseint (num) +1;
}
});
}
}else{
num++;
Cloneorder (num,prodid,prodname,price,description);
}
Tempid+=prodid+ ",";
$ ("#tdTotal"). HTML ("<font color= ' #FF0000 ' size= ' +1 ' face= ' Arial, Helvetica, Sans-serif ' >" +gettotalprice (). ToFixed (2) + "</font>");
}
});
Clone order according to order template
function Cloneorder (id,prodid,prodname,price,description) {
$ ("#orderMarter"). Clone (True). CSS ("Display", "block"). attr ("id", "tro" +id). Appendto ("#tblOrder");
var tr=$ ("#tro" +id);
$ (TR). Find ("Td:eq (0)"). html (num);
$ (TR). Find ("Td:eq (1)"). HTML (PRODID);
$ (TR). Find ("Td:eq (2)"). HTML (prodname);
$ (TR). Find ("Td:eq (3)"). HTML (description);
$ (TR). Find ("Td:eq (4)"). Find ("Input[name= ' Txtnum ')"). attr ("Value", "1");
$ (TR). Find ("Td:eq (5)"). HTML (price);
$ (TR). Find ("Td:eq (6)"). HTML ("<font color= ' Red ' >" +price+ "</font>");
}
Get a total Price
function Gettotalprice () {
var totalnum=0;
$ ("#tblOrder tr:gt (1)"). each (function () {
var value=parsefloat ($ (this). Find ("Td:eq (6)"). text ());
Totalnum+=value;
});
return totalnum;
}
$ (function () {
$ ("#tblOrder input[name= ' Txtnum ']"). Bind ("PropertyChange", function () {
var value=$ (this). Val ();
var tr=$ (this). Parent (). parent ();
if (value==0) {
if (Confirm (' OK to delete the product? ')) {
$ (TR). Remove ();
}
}else{
var price=$ (tr). Find ("Td:eq (5)"). html ();
var Total=value*price;
$ (TR). Find ("Td:eq (6)"). HTML ("<font color= ' Red ' >" +total.tofixed (2) + "</font>");
$ ("#tdTotal"). HTML ("<font color= ' #FF0000 ' size= ' +1 ' face= ' Arial, Helvetica, Sans-serif ' >" +gettotalprice (). ToFixed (2) + "</font>");
}
});
Plus 1
$ ("#tblOrder input[name= ' Btnadd ']"). Click (function () {
var txtbox=$ (this). Parent (). Parent (): Find ("Td:eq (4)"). Find ("Input[name= ' Txtnum ')");
var value=$ (txtbox). attr ("value");
value=+value+1;
$ (txtbox). attr ("value", value)
});
Minus 1
$ ("#tblOrder input[name= ' btncut ']"). Click (function () {
var txtbox=$ (this). Parent (). Parent (): Find ("Td:eq (4)"). Find ("Input[name= ' Txtnum ')");
var tr=$ (this). Parent (). parent ();
var value=$ (txtbox). attr ("value");
if (value>1) {
value=+value-1;
$ (txtbox). attr ("value", value)
}else{
if (Confirm (' OK to delete the product? ')) {
$ (TR). Remove ();
$ ("#tdTotal"). HTML ("<font color= ' #FF0000 ' size= ' +1 ' face= ' Arial, Helvetica, Sans-serif ' >" +gettotalprice (). ToFixed (2) + "</font>");
}
}
});
Delete Btnremove
$ ("#tblOrder input[name= ' Btnremove ']"). Click (function () {
var tr=$ (this). Parent (). parent ();
if (Confirm (' OK to delete the product? ')) {
$ (TR). Remove ();
$ ("#tdTotal"). HTML ("<font color= ' #FF0000 ' size= ' +1 ' face= ' Arial, Helvetica, Sans-serif ' >" +gettotalprice (). ToFixed (2) + "</font>");
}
});
});
</script>
