我是石家庄做网站的一名前端工程师，今天我给大家分享的demo是jq实现简单的购物车效果。希望这个demo希望对大家能有所帮助，我把代码贴到下面了。

效果图：

记得引入jquery

代码

样式

*{

margin: 0;padding: 0;

}

th,td{

width: 100px;

height: 50px;

line-height: 50px;

text-align: center;

}

input{

width: 30px;

height: 20px;

}

Body

<table border="1" cellspacing="0" cellpadding="10">

<tr>

<th>商品</th>

<th>单价</th>

<th>数量</th>

<th>小计</th>

<th>操作</th>

</tr>

<tr>

<td>小米5</td>

<td>3000</td>

<td><input type="button" class="jian" value="-" /> <span>0</span> <input type="button" class="jia" value="+" /></td>

<td class="xj">0</td>

<td><input type="button" class="sc" value="删除" /></td>

</tr>

<tr>

<td>三星s7</td>

<td>5000</td>

<td><input type="button" class="jian" value="-" /> <span>0</span> <input type="button" class="jia" value="+" /></td>

<td class="xj">0</td>

<td><input type="button" class="sc" value="删除" /></td>

</tr>

<tr>

<td>iphone7</td>

<td>6000</td>

<td><input type="button" class="jian" value="-" /> <span>0</span> <input type="button" class="jia" value="+" /></td>

<td class="xj">0</td>

<td><input type="button" class="sc" value="删除" /></td>

</tr><tr>

<td>华为9</td>

<td>4000</td>

<td><input type="button" class="jian" value="-" /> <span>0</span> <input type="button" class="jia" value="+" /></td>

<td class="xj">0</td>

<td><input type="button" class="sc" value="删除" /></td>

</tr>

<tr>

<td>oppo9</td>

<td>2500</td>

<td><input type="button" class="jian" value="-" /> <span>0</span> <input type="button" class="jia" value="+" /></td>

<td class="xj">0</td>

<td><input type="button" class="sc" value="删除" /></td>

</tr>

<tr>

<td>格力9</td>

<td>1000</td>

<td><input type="button" class="jian" value="-" /> <span>0</span> <input type="button" class="jia" value="+" /></td>

<td class="xj">0</td>

<td><input type="button" class="sc" value="删除" /></td>

</tr>

<tr>

<td colspan="5">合计：<span class="hj"></span></td>

</tr>

</table>

Js

<script type="text/javascript">

$(function  () {

$(".sc").click(function () {

$(this).parent().parent().remove()

})

$(".jia").click(function () {

var $t=$(this).siblings("span").html()

$(this).siblings("span").html(++$t)

var xj=$(this).parent().prev().html()

$(this).parent().next().html(xj*$t)

})

$(".jian").click(function () {

var $r=$(this).next().html()

if ($r>0) {

$(this).next().html(--$r)

}

var xj1=$(this).parent().prev().html()

$(this).parent().next().html(xj1*$r)

})

$(":button").click(function () {

var tt=0;

$(".xj").each(function () {

tt+=parseInt($(this).text())

})

$(".hj").html(tt)

})

})

</script>

以上就是石家庄做网站的尚武科技π为大家分享的jq实现购物车效果的demo希望对各位小伙伴有所帮助。      

如果大家对有什么技术方面的问题，可以关注石家庄做网站的尚武科技官方公众号“尚武科技π”，其中会有大量关于”互联网+”的相关的内容供大家互相学习了解，同时欢迎大家一起讨论技术问题。

通过以上内容的说明，大家对如何用jq实现购物车已经有了一定的了解。如果大家对这个功能有什么问题可以在尚武科技π留言，我们会在下期的文章更新中为您解答您的问题。 

希望石家庄做网站的尚武科技做网站做的越来越好。

如果大家觉得尚武科技π写的文章对大家有用的话别忘了分享给朋友，万分感谢大家对尚武科技π的支持。