Home > Developer > JavaScript
Product Information is simulated using JSON data
If you click the same product multiple times, you will not add it again. Instead, the number of existing products is + 1,
You can also manually enter the number of items. If you enter 0, the item will be automatically deleted from the shopping cart (when you click the minus sign to less than 1, the system will also prompt whether to delete the item information from the shopping cart)
The price and total price of each product are calculated dynamically based on the addition and deletion operations.
Download link:/201112/yuanma/jquery_gouwuche.rar
All basic functions have been implemented. We recommend that you use IE to run it. Other browsers are not tested.
HTML code:
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> untitled document </title>
</Head>
<Body>
<H2 style = "text-align: left"> item list <Table width = "800" border = "0" id = "tblProduct" cellpadding = "1" cellspacing = "1" bgcolor = "black">
<Tr id = "trMaster" bgcolor = "white" style = "display: none">
<Td>
ID: <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>
ID: <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>
ID: <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>
ID: <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 = "800" border = "0" id = "tblOrder" cellpadding = "1" cellspacing = "1" bgcolor = "black">
<Tr bgcolor = "white"> <td> NO. </td> <td> NO. </td> <td> name </td> <td> description </td> <td> quantity </td> <td> unit price </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 = 'btndelete' style = "width: 30px; text-align: center "value =" X "/> </td>
</Tr>
</Table>
<Table width = "800" 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 codeThe Code is 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 (); // The data and the template's td can be customized, and the format is correct.
$. Each (product, function (index, prod ){
I ++;
K ++;
If (I % len = 0 ){
J ++;
CloneTR (j); // clone rows based on the template
}
If (k = len)
K = 0;
SetTD (j, k, prod. prodId, prod. prodName, prod. price, prod. description); // assign a value to the td of the cloned row
});
// Clone rows based on the template
Function CloneTR (id ){
$ ("# TrMaster" ).clone(true).css ("display", "block"). attr ("id", "tr" + id). appendTo ("# tblProduct ");
$ ("# Tr" + id + "td span"). empty ();
}
// Assign a value to the td of the cloned row
Function setTD (trId, index, prodId, prodName, price, description ){
Var tr = $ ("# tr" + trId );
$ (Tr). find ("td: eq (" + index + ")"). find ("span: eq (0)" pai.html (prodId );
$ (Tr). find ("td: eq (" + index + ")"). find ("span: eq (1)" ).html (prodName );
$ (Tr). find ("td: eq (" + index + ")"). find ("span: eq (2)" pai.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 (). parent (); // get the td of the clicked button
Var prodId = $ (elem). find ("span: eq (0)" pai.html ();
Var prodName = $ (elem). find ("span: eq (1)" pai.html ();
Var price = $ (elem). find ("span: eq (2)" pai.html ();
Var description = $ (elem). find ("span: eq (3)" pai.html ();
If (prodId = "" | prodId = null | prodId = undefined ){
Alert ("click another product ");
} Else {
If (tempId. indexOf (prodId )! =-1 ){
If (confirm ('already exists, are you sure the number is + 1? ')){
$ ("# TblOrder tr: gt (1)"). each (function (){
If ($ (this). find ("td: eq (1)" example .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" 2.16.html ("<font color = '# ff000000' size =' + 1' face = 'arial, Helvetica, sans-serif '> "+ GetTotalPrice (). toFixed (2) + "</font> ");
}
});
// Clone the order according to the 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)" 2.16.html (num );
$ (Tr). find ("td: eq (1)" pai.html (prodId );
$ (Tr). find ("td: eq (2)" ).html (prodName );
$ (Tr). find ("td: eq (3)" pai.html (description );
$ (Tr ). find ("td: eq (4 )"). find ("input [name = 'txtnum']"). attr ("value", "1 ");
$ (Tr). find ("td: eq (5)" pai.html (price );
$ (Tr). find ("td: eq (6)" 2.16.html ("<font color = 'red'>" + price + "</font> ");
}
// Get the 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 ('Are you sure you want to delete this item? ')){
$ (Tr). remove ();
}
} Else {
Var price = $ (tr). find ("td: eq (5)" pai.html ();
Var total = value * price;
$ (Tr ). find ("td: eq (6)" 2.16.html ("<font color = 'red'>" + total. toFixed (2) + "</font> ");
$ ("# TdTotal" 2.16.html ("<font color = '# ff000000' size =' + 1' face = 'arial, Helvetica, sans-serif '> "+ GetTotalPrice (). toFixed (2) + "</font> ");
}
});
// Add 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 ('Are you sure you want to delete this item? ')){
$ (Tr). remove ();
$ ("# TdTotal" 2.16.html ("<font color = '# ff000000' size =' + 1' face = 'arial, Helvetica, sans-serif '> "+ GetTotalPrice (). toFixed (2) + "</font> ");
}
}
});
// Delete btnRemove
$ ("# TblOrder input [name = 'btndelete']"). click (function (){
Var tr = $ (this). parent (). parent ();
If (confirm ('Are you sure you want to delete this item? ')){
$ (Tr). remove ();
$ ("# TdTotal" 2.16.html ("<font color = '# ff000000' size =' + 1' face = 'arial, Helvetica, sans-serif '> "+ GetTotalPrice (). toFixed (2) + "</font> ");
}
});
});
</Script>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
