用js 写一个suk 生成表格功能,不限制属性条数
时间: 2024-03-13 20:48:15 浏览: 12
好的,以下是一个使用 JavaScript 实现的动态生成 SKU 表格的示例代码:
```javascript
// SKU 数据
var skuData = [
{ name: '颜色', values: ['红色', '绿色', '蓝色'] },
{ name: '尺寸', values: ['S', 'M', 'L', 'XL'] },
{ name: '材质', values: ['棉质', '丝绸', '涤纶'] }
];
// 生成表格
var table = document.createElement('table');
var thead = table.createTHead();
var tbody = table.createTBody();
// 表头
var ths = [];
for (var i = 0; i < skuData.length; i++) {
ths.push(document.createElement('th'));
ths[i].textContent = skuData[i].name;
thead.appendChild(ths[i]);
}
// 表格数据
var trs = [];
var rows = 1;
for (var i = 0; i < skuData.length; i++) {
rows *= skuData[i].values.length;
}
for (var i = 0; i < rows; i++) {
trs.push(document.createElement('tr'));
for (var j = 0; j < skuData.length; j++) {
var td = document.createElement('td');
var idx = i;
for (var k = j + 1; k < skuData.length; k++) {
idx /= skuData[k].values.length;
}
idx %= skuData[j].values.length;
td.textContent = skuData[j].values[Math.floor(idx)];
trs[i].appendChild(td);
}
tbody.appendChild(trs[i]);
}
// 添加表格到页面
document.body.appendChild(table);
```
以上代码中,我们先定义了一个 SKU 数据数组 `skuData`,其中包含了属性名称和属性值。接着,我们使用 JavaScript 动态创建表格元素,并通过循环生成表头和表格数据。在生成表格数据时,我们使用了一个算法来计算每个单元格中对应的属性值,并通过 `textContent` 属性将其添加到表格中。最后,我们将表格添加到页面中。
运行以上代码,您将会得到一个包含所有 SKU 组合的表格,其中每行表示一个 SKU,每列表示一个属性。您可以根据需要修改 `skuData` 数组中的属性名称和属性值,来生成不同的 SKU 表格。