jQuery实现简易商城系统项目实操
短信预约 -IT技能 免费直播动态提醒
一.效果图
二.body
<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 class="lazy" data-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 class="lazy" data-src="images/subtraction.gif" width="20" height="20"/>
<input type="text" class="quantity" value="1"/>
<img class="lazy" data-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 class="lazy" data-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 class="lazy" data-src="images/subtraction.gif" width="20" height="20"/>
<input type="text" class="quantity" value="1"/>
<img class="lazy" data-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>三.jQuery
<script type="text/javascript" class="lazy" data-src="js/jquery-1.12.4.js" ></script>
<script>
$(function(){
//点击加号触发事件
$('[class="lazy" data-src="images/add.gif"]').click(function(){
var num=parseInt($(this).prev().val());
$(this).prev().val(num+1);
});
//点击减号触发事件
$('[class="lazy" data-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>四.css
<style type="text/css" >
*{
font-size:12px;
}
</style>五.小结
本章使用jQuery的方式实现了一个简易的商城系统,这一个比较潦草,明天再实现一个比较好看的.
到此这篇关于jQuery实现简易商城系统项目实操的文章就介绍到这了,更多相关jQuery商城系统内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
