使用jQuery自动生成动态表的总价可以通过以下步骤实现:
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<div id="tableContainer"></div>
$(document).ready(function() {
var tableData = [
{ name: "商品1", price: 10 },
{ name: "商品2", price: 20 },
{ name: "商品3", price: 30 }
];
var table = $("<table>").addClass("dynamic-table");
var total = 0;
// 创建表头
var headerRow = $("<tr>");
headerRow.append($("<th>").text("商品名称"));
headerRow.append($("<th>").text("价格"));
table.append(headerRow);
// 创建表格行和列,并计算总价
$.each(tableData, function(index, item) {
var row = $("<tr>");
row.append($("<td>").text(item.name));
row.append($("<td>").text(item.price));
table.append(row);
total += item.price;
});
// 添加总价行
var totalRow = $("<tr>").addClass("total-row");
totalRow.append($("<td>").text("总价"));
totalRow.append($("<td>").text(total));
table.append(totalRow);
// 将表格添加到容器中
$("#tableContainer").append(table);
});
在上述代码中,我们首先定义了一个包含商品名称和价格的数据数组tableData
。然后,使用$("<table>")
创建一个新的表格元素,并使用addClass
方法添加一个自定义的CSS类名。接下来,我们创建表头行,并使用append
方法添加表头列。然后,使用$.each
方法遍历tableData
数组,创建表格的行和列,并计算总价。最后,创建总价行,并将表格添加到容器中。
通过以上步骤,你可以使用jQuery自动生成动态表的总价。请注意,这只是一个简单的示例,你可以根据实际需求进行修改和扩展。
领取专属 10元无门槛券
手把手带您无忧上云