Use the JQuery Clone template to display product information. You can modify the td in the template to determine how many items are displayed in each row.
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: http://www.bkjia.com/uploadfile/2011/1207/20111207052620634.rar
Basic functions have been implemented. We recommend that you use IE6, and the browser run. Other Browsers Do not test the function.
HTML code:
<! 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
View Code
<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 change blur", function (){
Var value = $ (this). val ();
Var tr = $ (this). parent (). parent ();
If (value = 0 ){
If (confirm ('Are you sure you want to delete this item? ')){
Var prodId = $ (tr). find ("td: eq (1)" pai.html ();
TempId = tempId. replace (prodId + ",","");
$ (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? ')){
Var prodId = $ (tr). find ("td: eq (1)" pai.html ();
TempId = tempId. replace (prodId + ",","");
$ (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? ')){
Var prodId = $ (tr). find ("td: eq (1)" pai.html ();
TempId = tempId. replace (prodId + ",","");
$ (Tr). remove ();
$ ("# TdTotal" 2.16.html ("<font color = '# ff000000' size =' + 1' face = 'arial, Helvetica, sans-serif '> "+ GetTotalPrice (). toFixed (2) + "</font> ");
}
});
});
</Script>
From Xiaofeng fuyue