<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获取总价
时间: 2024-02-16 21:04:55 浏览: 29
你可以使用以下的 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)` 方法会将总价保留两位小数。
相关问题
<div class="cart-thead"> <div class="t-checkbox"> <input type="checkbox" name="" id="" class="checkall"> 全选 </div> <div class="t-goods">商品</div> <div class="t-price">单价</div> <div class="t-num">数量</div> <div class="t-sum">小计</div> <div class="t-action">操作</div> </div>改成组件
好的,我可以帮你将这段代码改成一个组件,你可以参考下面的代码:
```js
// CartThead.js
import React from 'react';
function CartThead() {
return (
<div className="cart-thead">
<div className="t-checkbox">
<input type="checkbox" name="" id="" className="checkall" /> 全选
</div>
<div className="t-goods">商品</div>
<div className="t-price">单价</div>
<div className="t-num">数量</div>
<div className="t-sum">小计</div>
<div className="t-action">操作</div>
</div>
);
}
export default CartThead;
```
然后在其他组件中引入 `CartThead` 组件即可:
```js
// OtherComponent.js
import React from 'react';
import CartThead from './CartThead';
function OtherComponent() {
return (
<div>
<CartThead />
{/* 其他内容 */}
</div>
);
}
export default OtherComponent;
```
修改以下代码增加表格分页 let popup = document.createElement('div'); let table = document.createElement('table'); let thead = document.createElement('thead'); let tbody = document.createElement('tbody'); let tableHead = '<tr><th>映射对象id</th><th>映射对象类型</th><th>映射对象名称</th><th>操作</th></tr>'; let tableBody = '' for (let i = 0; i < dom.tableData.length; i++) { const obj = dom.tableData[i] tableBody = tableBody + '<tr><td style="text-align: center;">'+ obj.dataId +'</td><td style="text-align: center;">'+ obj.type +'</td><td style="text-align: center;">'+ obj.dataName +'</td><td style="text-align: center;"><button class="info-btn" data-dataid="'+ obj.dataId +'" data-type="'+ obj.type +'" data-dataname="'+ obj.dataName +'">查看</button></td></tr>' } thead.innerHTML = tableHead; tbody.innerHTML = tableBody; table.appendChild(thead); table.appendChild(tbody); popup.appendChild(table);
可以使用第三方库或者手写实现分页功能。以下是手写实现的示例代码:
1. 在HTML中添加分页元素
```
<div id="pagination"></div>
```
2. 修改代码增加分页逻辑
```
let popup = document.createElement('div');
let table = document.createElement('table');
let thead = document.createElement('thead');
let tbody = document.createElement('tbody');
let currentPage = 1; // 当前页
let pageSize = 10; // 每页显示的数据量
// 根据当前页和每页显示的数据量,截取数据
let startIndex = (currentPage - 1) * pageSize;
let endIndex = startIndex + pageSize;
let tableData = dom.tableData.slice(startIndex, endIndex);
let tableHead = '<tr><th>映射对象id</th><th>映射对象类型</th><th>映射对象名称</th><th>操作</th></tr>';
let tableBody = '';
for (let i = 0; i < tableData.length; i++) {
const obj = tableData[i];
tableBody = tableBody + '<tr><td style="text-align: center;">'+ obj.dataId +'</td><td style="text-align: center;">'+ obj.type +'</td><td style="text-align: center;">'+ obj.dataName +'</td><td style="text-align: center;"><button class="info-btn" data-dataid="'+ obj.dataId +'" data-type="'+ obj.type +'" data-dataname="'+ obj.dataName +'">查看</button></td></tr>';
}
thead.innerHTML = tableHead;
tbody.innerHTML = tableBody;
table.appendChild(thead);
table.appendChild(tbody);
popup.appendChild(table);
// 计算总页数
let totalPages = Math.ceil(dom.tableData.length / pageSize);
// 生成分页按钮
let pagination = document.getElementById('pagination');
for (let i = 1; i <= totalPages; i++) {
let btn = document.createElement('button');
btn.innerText = i;
btn.onclick = function() {
currentPage = i;
renderTable();
}
pagination.appendChild(btn);
}
function renderTable() {
// 清空表格和分页按钮
table.innerHTML = '';
pagination.innerHTML = '';
// 根据当前页和每页显示的数据量,截取数据
let startIndex = (currentPage - 1) * pageSize;
let endIndex = startIndex + pageSize;
let tableData = dom.tableData.slice(startIndex, endIndex);
let tableBody = '';
for (let i = 0; i < tableData.length; i++) {
const obj = tableData[i];
tableBody = tableBody + '<tr><td style="text-align: center;">'+ obj.dataId +'</td><td style="text-align: center;">'+ obj.type +'</td><td style="text-align: center;">'+ obj.dataName +'</td><td style="text-align: center;"><button class="info-btn" data-dataid="'+ obj.dataId +'" data-type="'+ obj.type +'" data-dataname="'+ obj.dataName +'">查看</button></td></tr>';
}
tbody.innerHTML = tableBody;
table.appendChild(tbody);
popup.appendChild(table);
// 重新生成分页按钮
for (let i = 1; i <= totalPages; i++) {
let btn = document.createElement('button');
btn.innerText = i;
btn.onclick = function() {
currentPage = i;
renderTable();
}
pagination.appendChild(btn);
}
}
renderTable();
```
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
在这个代码中再加一个类型,颜色和重量。 商品 单价 数 量 总价
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鉴本</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
}
table img {
max-width: 150px;
height: auto;
}
.popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
align-items: center;
justify-content: center;
}
.popup img {
max-width: 100%;
max-height: 100%;
cursor: zoom-out;
}
.sticky-header {
position: sticky;
top: 0;
background-color: #f5f5f5; /* 可根据需要设置背景色 */
}
</style>
</head>
<body>
<button onclick="addRow()">新增一行</button>
<button onclick="addColumn()">添加一列</button>
<button onclick="deleteRow()">删除行</button>
<button onclick="deleteColumn()">删除列</button>
列1
列2
列3
这样调整后列宽仍然没有变化
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鉴本</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
}
table img {
max-width: 150px;
height: auto;
}
.popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
align-items: center;
justify-content: center;
}
.popup img {
max-width: 100%;
max-height: 100%;
cursor: zoom-out;
}
.sticky-header {
position: sticky;
top: 0;
background-color: #f5f5f5; /* 可根据需要设置背景色 */
}
</style>
</head>
<body>
<button onclick="addRow()">新增一行</button>
<button onclick="addColumn()">添加一列</button>
<button onclick="deleteRow()">删除行</button>
<button onclick="deleteColumn()">删除列</button>
列1
列2
列3
这样调整后列宽仍然没有变化
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)