JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<table 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 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 = (totalNum ? parseInt(totalNum) : 0) + parseInt(total); //把之前按的加總
$('#total').text(totalNum); //把加總的印在總額裡面
localStorage.setItem('xyz', $('#total').val()); //紀錄加總金額在localstorage
})
})