jQuery是一種Javascript庫,可以使代碼優(yōu)化、更加易讀性,并且可以輕松地完成各種操作。今天我們要討論的是如何使用jQuery計算table的金額。
首先,我們需要在HTML中創(chuàng)建一個表格,并添加一些內(nèi)容:
<table> <tr> <th>商品名稱</th> <th>價格</th> <th>數(shù)量</th> <th>總價</th> </tr> <tr> <td>蘋果</td> <td>5元</td> <td>3個</td> <td class="sub_total"></td> </tr> <tr> <td>香蕉</td> <td>2元</td> <td>5個</td> <td class="sub_total"></td> </tr> </table>
上面的表格中,我們添加了四列,分別是商品名稱、價格、數(shù)量和總價。其中,總價一列的class為"sub_total",我們將在下面的代碼中用到。
接下來,我們創(chuàng)建一個jQuery函數(shù),用于計算總價。代碼如下:
<script> $(document).ready(function(){ var sum = 0; $("#myTable tr").each(function(){ var price = parseInt($(this).find("td:nth-child(2)").text()); var quantity = parseInt($(this).find("td:nth-child(3)").text()); var sub_total = price * quantity; $(this).find(".sub_total").text(sub_total); sum += sub_total; }); $("#total").text("總價:" + sum + "元"); }); </script>
這段代碼首先定義了一個變量sum,用于累加所有商品的總價。然后,使用each()函數(shù)遍歷table中的每一行,并計算出該行的總價。計算總價時,我們使用了parseInt()函數(shù)將價格和數(shù)量轉(zhuǎn)換成整數(shù)。最后,將計算出的總價存儲到變量sum中,并將該值顯示在頁面上。
在HTML中,我們還需要添加一個ID為"total"的元素,用于顯示所有商品的總價。代碼如下:
<p id="total"></p>
到這里,我們的jQuery計算table金額的代碼就完成了。運行該代碼,我們就可以看到所有商品的總價顯示在頁面上了。