JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<table id="tb" border='1'>
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
</tr>
<tr>
<td>APPLE</td>
<td>35</td>
<td>
<input type='text' />
<button>加到購物車</button>
</tr>
<tr>
<td>BANANA</td>
<td>18</td>
<td>
<input type='text' />
<button>加到購物車</button>
</tr>
<tr>
<td>TOMATO</td>
<td>39</td>
<td>
<input type='text' />
<button>加到購物車</button>
</tr>
<tr>
<td>ORANGE</td>
<td>17</td>
<td>
<input type='text' />
<button>加到購物車</button>
</tr>
<tr>
<td>LEMON</td>
<td>28</td>
<td>
<input type='text' />
<button>加到購物車</button>
</tr>
<tr>
<td>TOTAL</td>
<td></td>
<td colspan="2" id='total'></td>
</tr>
</table>
JavaScript
$(document).ready(function () {
let totalNum = localStorage.getItem('xyz'); //從localstorage取得加總金額
localStorage.getItem('abx'); //從localstorage取得單價乘以數量
$('button').click(function () {
let total = 0;
let price = 0;
let qunt = 0;
$('#tb input').each(function(i,j){
price = parseInt($(j).parent().prev().html(),10);
qunt = $(j).val() || 0;
if(qunt < 0) qunt = 0;
total += price * qunt;
});
$('#total').text(total);
//let qunt = $(this).prev().val(); //取得input的金額
//localStorage.setItem('abc', qunt); //將價格記錄在localstorage
//let pri = $(this).closest('td').prev('td').html(); //取得原本設定的單價
//let totalNum = 0; //加總初始值是0
//let total = qunt * pri; //單價乘以數量
//totalNum += total; //把之前按的加總
//$('#total').text(totalNum); //把加總的印在總額裡面
//localStorage.setItem('xyz', $('#total').val()); //紀錄加總金額在localstorage
})
})