今天接到一个需求，要求输出一个商品规格表。点击“添加规格”，展示规格名、规格值。规格名和规格值必填，若勾选了“添加规格图片”，规格图片也必填。规格名和规格值最多不得多于10个字，一个规格下可添加多个规格值，无上限。一个规格名+多个规格值为一套规格，添加多套规格，下方的规格明细按照填写的规格信息拆分。
如下图：
demo示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="./jquery.min.js"></script> <!--引入Jquery-->>
</head>
<body>
<div class="list">
<div class="item">
<p class="guigeName">规格名：<input type="text" value="尺寸"> <input type="checkbox" value="">添加规格图片 <input type="button" value="添加规格"></p>
<p class="guigeZhi">规格值：<input type="text" value="11寸"> <input type="text" value="12寸"> <input type="text" value="13寸"></p>
<!-- <p><input type="button" value="+"> <input type="button" value="+"></p> -->
</div>
<div class="item">
<p class="guigeName">规格名：<input type="text" value="颜色"></p>
<p class="guigeZhi">规格值：<input type="text" value="红色"> <input type="text" value="黄色"> <input type="text" value="黑色"></p>
</div>
<div class="item">
<p class="guigeName">规格名：<input type="text" value="内存"></p>
<p class="guigeZhi">规格值：<input type="text" value="32G"> <input type="text" value="64G"> <input type="text" value="128G"></p>
</div>
<div class="item">
<p class="guigeName">规格名：<input type="text" value="重量"></p>
<p class="guigeZhi">规格值：<input type="text" value="100g"> <input type="text" value="200g"> <input type="text" value="300g"></p>
</div>
</div>
<table width="100%" border="1px solid" style="text-align: center;" class="tableList">
<tr class="title"></tr>
<!--自动生成表格-->
</table>
<p><button onclick="addGuiGe()">确定</button></p>
</body>
</html>
<script>
function addGuiGe() {
var title = new Array();
var values = new Array();
//1.获取数据
$.each($(".list").children(), function(index, obj){
var tempArr = new Array();
title[index] = $(obj).children("p.guigeName").children("[type='text']").val()
$.each($(obj).children("p.guigeZhi").children("[type='text']"), function(i, obj1){
tempArr[i] = $(obj1).val();
});
values[index] = tempArr;
});
//2.处理表头
$(".title").children().remove();
var strTitle = '';
$.each(title, function(k, name){
strTitle += '<td>' +name+ '</td>';
});
strTitle += '<td><span style="color: red;">*</span>价格</td>';
strTitle += '<td>库存</td>';
strTitle += '<td>规格编码</td>';
strTitle += '<td>图片</td>';
$(".title").append(strTitle);
//3.处理内容
//3.1获取列表（构建笛卡尔积）
var list = discarts(values);
//3.2拼接数据（输出所有数据行）
var tableList = '';
for(var i=0;i<list.length;i++) {
tableList += '<tr>';
for(var j=0;j<list[i].length;j++) {
tableList += '<td>' + list[i][j] + '</td>';
}
tableList += '<td><input type="text" value=""></td>';
tableList += '<td><input type="text" value=""></td>';
tableList += '<td><input type="text" value=""></td>';
tableList += '<td><img src="#"></td>';
tableList += '</tr>';
}
$(".tableList tr").not(':eq(0)').empty();//保留表头
$(".tableList").append(tableList);//添加数据行至表单
//3.3合并单元格
$(function() {
for(var c=0;c<values.length-1;c++) {
$(".tableList").rowspan(c);//传入的参数是对应的列数，下标从0开始，不使用循环进行指定时候，也可以单独指定某一列
}
});
}
//将数据处理为笛卡尔积
function discarts() {
var twodDscartes = function (a, b) {
var ret = [];
for (var i = 0; i < a.length; i++) {
for (var j = 0; j < b.length; j++) {
ret.push(ft(a[i], b[j]));
}
}
return ret;
}
var ft = function (a, b) {
if (!(a instanceof Array))
a = [a];
var ret = a.slice(0);
ret.push(b);
return ret;
}
//多个一起做笛卡尔积
return (function (data) {
var len = data.length;
if (len == 0)
return [];
else if (len == 1)
return data[0];
else {
var r = data[0];
for (var i = 1; i < len; i++) {
r = twodDscartes(r, data[i]);
}
return r;
}
})(arguments.length > 1 ? arguments : arguments[0]);
}
//合并单元格
jQuery.fn.rowspan = function(colIdx) {
return this.each(function(){
var that;
$('tr', this).each(function(row) {
$('td:eq('+colIdx+')', this).filter(':visible').each(function(col) {
if (that!=null && $(this).html() == $(that).html()) {
rowspan = $(that).attr("rowSpan");
if (rowspan == undefined) {
$(that).attr("rowSpan",1);
rowspan = $(that).attr("rowSpan"); }
rowspan = Number(rowspan)+1;
$(that).attr("rowSpan",rowspan);
$(this).hide();
} else {
that = this;
}
});
});
});
}
</script>
示例运行结果如下图所示：