??????? ??? ?? ??? ???? ?? ???? ??? ?????.
??? 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="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>手機</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>
? ??? ??? ??? ??? 2? ????. ??? ??? ??? ??? ? ???? ??? ???? ??? ?? ?????. , ??? ????? ????? ???? ?? ??? ?? ? ????
??? ?????. ??? ?? ??? ??????
??? ??, ?? ??? ???? ? ??? ???? ??, ? ??, ?? 3?? ????? ??? ???.
? ???? ??? ???? ?? ??, id? ??, ?? ?, id? total ? ?? ?? ??? ??? id? count
???? ? ??? ???????.
<!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="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>
? ????? ?? ?? ???? ??????. 3?? ????? ??? ??? ? ?? ??? ?? ?? ?? ? ??_1 ? ?? ?? ? ??_1 ?? ?? ? ??_1
??? ??? ??? ?????
<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); //總價格等于單價乘以點擊后的數量值 } </script>
?? ?? ??? ???????. ??? ?????
<!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); } </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>
? ??? ??? ?? ?? ??? ???? ???? ??? ??? ????? ??? ??? ??? ??? ?? ???? ???? ???????. ? ??