2020最新国产在线不卡a-爱看女同中文字幕av-国产大秀视频在线一区二区-大香蕉手机在线最新视频

我是石家莊做網(wǎng)站的一名前端工程師，今天我給大家分享的demo是jq實現(xiàn)簡單的購物車效果。希望這個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>數(shù)量</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>

以上就是石家莊做網(wǎng)站的尚武科技π為大家分享的jq實現(xiàn)購物車效果的demo希望對各位小伙伴有所幫助。      

如果大家對有什么技術(shù)方面的問題，可以關(guān)注石家莊做網(wǎng)站的尚武科技官方公眾號“尚武科技π”，其中會有大量關(guān)于”互聯(lián)網(wǎng)+”的相關(guān)的內(nèi)容供大家互相學(xué)習(xí)了解，同時歡迎大家一起討論技術(shù)問題。

通過以上內(nèi)容的說明，大家對如何用jq實現(xiàn)購物車已經(jīng)有了一定的了解。如果大家對這個功能有什么問題可以在尚武科技π留言，我們會在下期的文章更新中為您解答您的問題。 

希望石家莊做網(wǎng)站的尚武科技做網(wǎng)站做的越來越好。

如果大家覺得尚武科技π寫的文章對大家有用的話別忘了分享給朋友，萬分感謝大家對尚武科技π的支持。