Use JQuery to implement a shopping cart similar to a shopping mall

Source: Internet
Author: User

 

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.