Mula-mula mari kita lihat kod 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>Kemudian mari kita tulis fungsi tanda tambah id tersebut ialah a2. dapatkan nilai kotak kuantiti dan dapatkan kandungan HTML bagi jumlah kotak harga, apabila tanda tambah diklik
Kemudian kami menggunakan fungsi parseInt untuk menukar v1 kepada nombor Nilai kuantiti pada masa ini sudah 2Jadi kami menggunakan document.getElementById(. 'id').value = v1 + 1;Kemudian kami menetapkan nilai pada html jumlah kotak harga, dan mendarabkan kuantiti dengan harga unit Dengan cara ini, apabila kita klik tanda tambah dalam shopping cart, fungsi menukar jumlah harga telah dilaksanakan Kod lengkap adalah seperti berikut:
<script type="text/javascript">
window.onload=function(){
var input = document.getElementById('id').value; //获取文本框的value值
var good = document.getElementById('td').innerHTML; //获取id是td的html文本内容
document.getElementById('a2').onclick = function(){
var v1 = document.getElementById('id').value;
v1=parseInt(v1);
document.getElementById('id').value = v1 + 1;
document.getElementById('td2').innerHTML = parseInt(good) * parseInt(v1+1);
}
}
</script>.bahagian seterusnya