JavaScript development of shopping cart layout
First of all, we need to understand what kind of function we need to make
To make a simple shopping cart, the table has the unit price, the addition and subtraction of the quantity, and then there is a total price. When we click add or subtract, The total price will change
Let’s look at the following html layout code as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
table{width:350px;border:1px solid #eee;text-align:center;}
.tr2{height:50px;}
input{width:30px;height:20px;text-align: center;}
a{text-decoration:none}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="1">
<tr>
<th>名稱</th>
<th>單價</th>
<th>數(shù)量</th>
<th>總價</th>
</tr>
<tr class="tr2">
<td>手表</td>
<td id="td">1999</td>
<td>
<a href="#" id="a1" class="tp1">-</a>
<input type="text" value="1" id="id">
<a href="#" id="a2" class="tp2">+</a>
</td>
<td id="td2">1999</td>
</tr>
</table>
</body>
</html>As shown in the above code, friends can see that there are plus and minus signs on both sides of the text box, and then friends can see The cell with id='td' has 1999 in it, which is the default value. The unit price
The cell with id="td2" is used to store the total price
