javascript develops shopping cart function to implement plus sign function
Let’s take a look at the html part of the code:
<!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>單價(jià)</th>
<th>數(shù)量</th>
<th>總價(jià)</th>
</tr>
<tr class="tr2">
<td>手表</td>
<td id="price">1999</td>
<td>
<a href="#" id="a1" class="tp1">-</a>
<input type="text" value="1" id="count" >
<a href="#" id="a2" class="tp2">+</a>
</td>
<td id="total">1999</td>
</tr>
<tr class="tr2">
<td>手機(jī)</td>
<td id="price_1">2000</td>
<td>
<a href="#" id="a1" class="tp1">-</a>
<input type="text" value="1" id="count_1">
<a href="#" id="a2" class="tp2">+</a>
</td>
<td id="total_1">2000</td>
</tr>
</table>
</br>
</body>
</html>As shown in the above code, we have 2 products. If we add a product each time and write the plus and minus function, then the code will be There are too many. Although it is possible, it is not advisable, so we can make a function below
Let us analyze, what are the parameters of the function?
In fact, if we do the addition and subtraction function, and then the total price changes, what we need is 3 parameters, unit price, total price, quantity
Look at the cell displaying the unit price in the above code, id is price total price cell, id is total id of the first product text box is count
Next, we look at the cell code:
<!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>單價(jià)</th>
<th>數(shù)量</th>
<th>總價(jià)</th>
</tr>
<tr class="tr2">
<td>手表</td>
<td id="price">1999</td>
<td>
<a href="#" id="a1" class="tp1" onclick="a2('price','total','count')">-</a>
<input type="text" value="1" id="count" onblur="a3('price','total','count')">
<a href="#" id="a2" class="tp2" onclick="a1('price','total','count')">+</a>
</td>
<td id="total">1999</td>
</tr>
<tr class="tr2">
<td>手機(jī)</td>
<td id="price_1">1999</td>
<td>
<a href="#" id="a1" class="tp1" onclick="a2('price_1','total_1','count_1')">-</a>
<input type="text" value="1" id="count_1" onblur="a3('price_1','total_1','count_1')">
<a href="#" id="a2" class="tp2" onclick="a1('price_1','total_1','count_1')">+</a>
</td>
<td id="total_1">1999</td>
</tr>
</table>
</br>
</body>
</html>As above code, we add The minus sign is bound to a click event, which contains three parameters: product unit price price and price_1 total price total and total_1 quantity count and count_1
Let’s implement the plus sign function
<script type="text/javascript">
function a1(td,td2,id){
var price = document.getElementById(td).innerHTML;//獲得單價(jià)
var total = document.getElementById(td2).innerHTML;//獲得總價(jià)
var v1 = parseInt(document.getElementById(id).value);//獲得數(shù)量
document.getElementById(id).value = v1+1; //獲取點(diǎn)擊后的數(shù)量
document.getElementById(td2).innerHTML = parseInt(price) * parseInt(v1+1); //總價(jià)格等于單價(jià)乘以點(diǎn)擊后的數(shù)量值
}
</script>Let’s take a look at the following complete code: Let’s see how the effect is achieved
<!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>
<script type="text/javascript">
function a1(td,td2,id){
var price = document.getElementById(td).innerHTML;//獲得單價(jià)
var total = document.getElementById(td2).innerHTML;//獲得總價(jià)
var v1 = parseInt(document.getElementById(id).value);//獲得數(shù)量
document.getElementById(id).value = v1+1;
document.getElementById(td2).innerHTML = parseInt(price) * parseInt(v1+1);
}
</script>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="1">
<tr>
<th>名稱</th>
<th>單價(jià)</th>
<th>數(shù)量</th>
<th>總價(jià)</th>
</tr>
<tr class="tr2">
<td>手表</td>
<td id="price">1999</td>
<td>
<a href="#" id="a1" class="tp1" onclick="a2('price','total','count')">-</a>
<input type="text" value="1" id="count" onblur="a3('price','total','count')">
<a href="#" id="a2" class="tp2" onclick="a1('price','total','count')">+</a>
</td>
<td id="total">1999</td>
</tr>
<tr class="tr2">
<td>手機(jī)</td>
<td id="price_1">1999</td>
<td>
<a href="#" id="a1" class="tp1" onclick="a2('price_1','total_1','count_1')">-</a>
<input type="text" value="1" id="count_1" onblur="a3('price_1','total_1','count_1')">
<a href="#" id="a2" class="tp2" onclick="a1('price_1','total_1','count_1')">+</a>
</td>
<td id="total_1">1999</td>
</tr>
</table>
</br>
</body>
</html>Look at the above example, no matter how many products I have, if I click the plus sign, the price will be different, and the total price will be different, so use this The method will be more convenient and simpler
