Pertama sekali, kita perlu memahami jenis fungsi yang perlu kita buat
Untuk membuat troli beli-belah yang mudah, jadual mempunyai harga unit, penambahan dan penolakan kuantiti, dan kemudiannya ialah jumlah harga. Apabila kita klik Tambah atau Tolak, Jumlah harga akan berubah
Mari kita lihat kod susun atur html berikut:
<!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>数量</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>Seperti yang ditunjukkan dalam kod di atas, rakan-rakan boleh lihat bahawa terdapat tanda tambah dan tolak pada kedua-dua belah kotak teks, dan kemudian rakan Sel dengan id='td' mempunyai 1999 di dalamnya, yang merupakan nilai lalai Sel dengan harga unit
id ="td2" digunakan untuk menyimpan jumlah harga
