本篇內容主要講解“jQuery怎么實現簡易商城系統”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“jQuery怎么實現簡易商城系統”吧!
<body> <table border="1" cellpadding="0" cellspacing="0"> <tr> <th><input type='checkbox' name="c1"/>全選</th> <th>商品信息</th> <th>宜美惠價</th> <th>數量</th> <th>操作</th> </tr> <tr class="tr_0"> <td> <input name="" type="checkbox" value=""/> </td> <td> <img src="images/sang.gif" class="products"/><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >天堂雨傘</a></td><td>￥32.9元 </td> <td> <img src="images/subtraction.gif" width="20" height="20"/> <input type="text" class="quantity" value="1"/> <img src="images/add.gif" width="20" height="20"/> </td> <td> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="del">刪除</a> </td> </tr> <tr> <td> <input name="" type="checkbox" value=""/> </td> <td> <img src="images/iphone.gif" class="products"/><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >蘋果手機iphone5</a></td><td>￥3339元 </td> <td> <img src="images/subtraction.gif" width="20" height="20"/> <input type="text" class="quantity" value="1"/> <img src="images/add.gif" width="20" height="20"/> </td> <td> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="del">刪除</a> </td> </tr> </table> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="add">添加</a> </body>
<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
<script>
$(function(){
//點擊加號觸發事件
$('[src="images/add.gif"]').click(function(){
var num=parseInt($(this).prev().val());
$(this).prev().val(num+1);
});
//點擊減號觸發事件
$('[src="images/subtraction.gif"]').click(function(){
var num=parseInt($(this).next().val());
if(num<=0){
return alert('不能再少了！');
};
$(this).next().val(num-1);
});
//刪除事件
$('[class="del"]').click(function(){
$(this).parent().parent().remove();
});
//選中框,全選框事件
$('[type="checkbox"]').click(function(){
var len=$('[type="checkbox"]').length;
var clen=$('[type="checkbox"]:checked').length;
var t1=$('[name="c1"]').prop("checked");
var pd=$(this).parent().text();
if(pd=="全選"){
$('[name="c1"]').prop("checked",t1);
$('[type="checkbox"]').prop("checked",t1);
return "";
}
if(clen==len-1 & t1==false){
$('[name="c1"]').prop("checked",true);
}else if(clen>=len-1 & t1==true){
$('[name="c1"]').prop("checked",false);
}
});
//添加事件
$('[class="add"]').click(function(){
var newD=$('tr:eq(2)').clone();
$('tr:last').after(newD);
});
//輸入框
$('[type="text"]').change(function(){
var te=$(this).val();
te=te.toString();
for(i=0;i<te.length;i++){
if(i==2 || te[i]=="."){
alert('不能超過100，不能有小數');
return $(this).val(1);
};
};
if(te<=0 || isNaN(te)){
$(this).val(1);
};
});
});
</script><style type="text/css" >
*{
font-size:12px;
}
</style>到此，相信大家對“jQuery怎么實現簡易商城系統”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
