javascript membangunkan fungsi troli beli-belah untuk melaksanakan fungsi tanda tambah
Mari kita lihat bahagian html kod:
<!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="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>Seperti yang ditunjukkan dalam kod di atas, kita mempunyai 2 produk Jika kita menambah produk setiap kali dan menulis fungsi tambah dan tolak, maka kodnya akan Terdapat terlalu banyak Walaupun mungkin, ia tidak digalakkan, jadi kita boleh membuat fungsi di bawah
Mari kita analisa, apakah parameter fungsi tersebut?
Malah, jika kita melakukan fungsi tambah dan tolak, dan kemudian jumlah harga berubah, kita hanya perlukan 3 parameter, harga unit, jumlah harga, kuantiti
Lihat pada sel yang memaparkan harga unit dalam kod di atas ialah harga jumlah sel, id ialah jumlah id kotak teks produk pertama dikira
Seterusnya, kita melihat kod sel:
<!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="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>Sebagaimana kod di atas, kami tambah Tanda tolak terikat pada peristiwa klik, yang mengandungi 3 parameter: harga harga unit produk dan harga_1 jumlah harga dan jumlah_1 kiraan kuantiti dan kiraan_1
Mari laksanakan fungsi tanda tambah
<script type="text/javascript">
function a1(td,td2,id){
var price = document.getElementById(td).innerHTML;//獲得單價
var total = document.getElementById(td2).innerHTML;//獲得總價
var v1 = parseInt(document.getElementById(id).value);//獲得數(shù)量
document.getElementById(id).value = v1+1; //獲取點擊后的數(shù)量
document.getElementById(td2).innerHTML = parseInt(price) * parseInt(v1+1); //總價格等于單價乘以點擊后的數(shù)量值
}
</script>Mari kita lihat kod lengkap berikut: Mari lihat bagaimana pelaksanaannya berfungsi
<!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;//獲得單價
var total = document.getElementById(td2).innerHTML;//獲得總價
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>單價</th>
<th>數(shù)量</th>
<th>總價</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>Lihat contoh di atas, tidak kira berapa banyak produk yang saya ada, jika saya klik tanda tambah, harga akan berbeza dan jumlah harga akan berbeza, jadi gunakan ini Kaedahnya akan lebih mudah dan ringkas
