Dans les deux dernières sections, nous avons terminé les fonctions d'addition et de soustraction. Traitons maintenant le nombre de zones de texte
Dans des circonstances normales, nous pouvons saisir des zones de texte, et nous l'autorisons également ici. Entrée, lorsque nous saisissons un paragraphe de caractères, ou chinois
nous ne devons pas l'exécuter, donner un message d'invite, puis donner à la zone de texte une valeur par défaut Regardons le code ci-dessous :
<script>
function a3(td,td2,id){
var price = document.getElementById(td).innerHTML;//获得单价
var total = document.getElementById(td2).innerHTML;//获得总价
var v1 = parseInt(document.getElementById(id).value);//获得数量
if(isNaN(v1) || v1 < 1){
alert("请输入正确的数字");
document.getElementById(id).value = 1 ;
v1 = parseInt(document.getElementById(id).value);
}else{
document.getElementById(id).value = v1 ;
}
document.getElementById(td2).innerHTML = parseInt(price) * parseInt(v1);
}
</script>. v1 est la valeur de la zone de texte que nous avons obtenue. Pour juger v1, la fonction isNaN() détecte si v1 est un nombre illégal. v1<1 est un nombre négatif. Dans de tels cas, nous donnons une valeur par défaut. Cette valeur est attribuée à la quantité
Ce qui suit montre le code complet des fonctions d'addition et de soustraction et des zones de texte de traitement :
<!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);//获得数量
document.getElementById(id).value = v1+1;
document.getElementById(td2).innerHTML = parseInt(price) * parseInt(v1+1);
}
function a2(td,td2,id){
var price = document.getElementById(td).innerHTML;//获得单价
var total = document.getElementById(td2).innerHTML;//获得总价
var v1 = parseInt(document.getElementById(id).value);//获得数量
if(v1>1){
document.getElementById(id).value = v1-1;
document.getElementById(td2).innerHTML = parseInt(price) * parseInt(v1-1);
}else{
var v1 = 1;
}
}
function a3(td,td2,id){
var price = document.getElementById(td).innerHTML;//获得单价
var total = document.getElementById(td2).innerHTML;//获得总价
var v1 = parseInt(document.getElementById(id).value);//获得数量
if(isNaN(v1) || v1 < 1){
alert("请输入正确的数字");
document.getElementById(id).value = 1 ;
v1 = parseInt(document.getElementById(id).value);
}else{
document.getElementById(id).value = v1 ;
}
document.getElementById(td2).innerHTML = parseInt(price) * parseInt(v1);
}
</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="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>手机</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>