<tbody id="futr"> <tr th:each="item :${utilShoppingCarts} "> <td><img th:src=" ${item.c_imgSrc} " src="img/t_recommen/cup.jpg" width="220" height="170"><br th:text=" ${item.c_name}">健身水杯</td> <td th:text="${item.c_price}">100</td> <td><input th:value="${item.s_number}" type="number" value="1" min="1"></td> <td id="jisuan" th:text=" ${item.c_price} * ${item.s_number} ">100</td> <td> <a href="" th:href="@{ ${#request.contextPath}+'deleteSC?sid=' +${item.s_id} }"> <button class="btn btn-danger">删除</button> </a> </td> </tr> </tbody> <tfoot>用js获取总价
时间: 2024-02-25 08:55:53 浏览: 24
你可以使用以下的 JavaScript 代码来获取总价:
```
let total = 0;
document.querySelectorAll('#futr td#jisuan').forEach(function(td) {
total += parseFloat(td.textContent);
});
console.log(total);
```
这段代码会遍历所有 id 为 `futr` 的 tbody 下的 id 为 `jisuan` 的 td 元素,将每个 td 中的文本内容解析为浮点数,并将其加到 `total` 变量中。最终,`total` 变量的值就是购物车中所有商品的总价。
相关问题
<div style="text-align: center;"> <table class="table table-hover tar" style="margin: 0 auto;"> <thead> <tr> <th>商品名称</th> <th>单价</th> <th>数量</th> <th>总价</th> <th>操作</th> </tr> </thead> <tbody id="futr"> <tr th:each="item :${utilShoppingCarts} "> <td><img th:src=" ${item.c_imgSrc} " src="img/t_recommen/cup.jpg" width="220" height="170"><br th:text=" ${item.c_name}">健身水杯</td> <td th:text="${item.c_price}">100</td> <td><input th:value="${item.s_number}" type="number" value="1" min="1"></td> <td id="jisuan" th:text=" ${item.c_price} * ${item.s_number} ">100</td> <td> <a href="" th:href="@{ ${#request.contextPath}+'deleteSC?sid=' +${item.s_id} }"> <button class="btn btn-danger">删除</button> </a> </td> </tr> </tbody> <tfoot> <tr> <td colspan="3">总价:</td> <td id="zongjia">600</td> </tr> </tfoot> </table> </div>利用js获取总价
你可以使用以下的 JavaScript 代码来获取总价:
```
let total = 0;
document.querySelectorAll('#futr td#jisuan').forEach(function(td) {
total += parseFloat(td.textContent);
});
document.querySelector('#zongjia').textContent = total.toFixed(2);
```
这段代码会遍历所有 id 为 `futr` 的 tbody 下的 id 为 `jisuan` 的 td 元素,将每个 td 中的文本内容解析为浮点数,并将其加到 `total` 变量中。最终,`total` 变量的值就是购物车中所有商品的总价。然后,这段代码会将总价更新到 id 为 `zongjia` 的 td 元素的文本内容中。`toFixed(2)` 方法会将总价保留两位小数。
<table class="table table-hover"> <thead> <tr> <th>商品名称</th> <th>单价</th> <th>数量</th> <th>总价</th> <th>操作</th> </tr> </thead> <tbody> <div><tr> <td><img src="img/t_recommen/cup.jpg" width="200" height="150"><br>健身水杯 </td> <td>100</td> <td><input type="number" value="1" min="1"></td> <td>100</td> <td><button class="btn btn-danger">删除</button></td> </tr> <tr> <td><img src="img/t_recommen/xiaomi.jpg" width="200" height="150"><br>商品2</td> <td>200</td> <td><input type="number" value="1" min="1"></td> <td>200</td> <td><button class="btn btn-danger">删除</button></td> </tr> <tr> <td><img src="img/mobile/m2.jpg" width="200" height="150"><br>商品3</td> <td>300</td> <td><input type="number" value="1" min="1"></td> <td>300</td> <td><button class="btn btn-danger">删除</button></td> </tr> </tbody> <tfoot> <tr> <td colspan="3">总价:</td> <td colspan="2">600</td> </tr> </div> </tfoot> </table>让总体居中
要让整个表格居中,可以将表格放在一个 div 元素中,并给这个 div 元素添加 text-align: center 样式。也可以直接给表格添加 margin: 0 auto 样式,这样会使表格在水平方向上居中。以下是修改后的代码:
```html
<div style="text-align: center;">
<table class="table table-hover" style="margin: 0 auto;">
<thead>
<tr>
<th>商品名称</th>
<th>单价</th>
<th>数量</th>
<th>总价</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="img/t_recommen/cup.jpg" width="200" height="150"><br>健身水杯 </td>
<td>100</td>
<td><input type="number" value="1" min="1"></td>
<td>100</td>
<td><button class="btn btn-danger">删除</button></td>
</tr>
<tr>
<td><img src="img/t_recommen/xiaomi.jpg" width="200" height="150"><br>商品2</td>
<td>200</td>
<td><input type="number" value="1" min="1"></td>
<td>200</td>
<td><button class="btn btn-danger">删除</button></td>
</tr>
<tr>
<td><img src="img/mobile/m2.jpg" width="200" height="150"><br>商品3</td>
<td>300</td>
<td><input type="number" value="1" min="1"></td>
<td>300</td>
<td><button class="btn btn-danger">删除</button></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">总价:</td>
<td colspan="2">600</td>
</tr>
</tfoot>
</table>
</div>
```