먼저 다음 HTML 코드를 살펴보겠습니다
<!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>이제 더하기 기호의 기능을 작성해 보겠습니다. 아래 코드는 a2입니다.
<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>먼저 수량 상자의 값과 html 내용을 가져옵니다. 총 가격 상자. 더하기 기호를 클릭하면
v1을 사용하여 수량 상자의 값을 받습니다.
참고: 더하기 기호를 클릭하면 수량이 변경됩니다.
그런 다음 parsInt 함수를 사용하여 v1을 변환합니다. 이때 수량 값은 이미 2입니다.
그래서 document.getElementById('id').value = v1 + 1;
그런 다음 총 가격 상자의 html에 값을 할당하고 수량에 단가가 곱해집니다
이렇게 장바구니에서 더하기 기호를 클릭하면 총 가격이 발생합니다. 변경된 기능이 구현되었으며 전체 코드는 다음과 같습니다.
<!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">
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>
</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>