标签：jQuery function rowspan 为例 tableList 规格 自动 strTitle var
今天接到一个需求，要求输出一个商品规格表。点击“添加规格”，展示规格名、规格值。规格名和规格值必填，若勾选了“添加规格图片”，规格图片也必填。规格名和规格值最多不得多于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>
示例运行结果如下图所示：
标签：jQuery,function,rowspan,为例,tableList,规格,自动,strTitle,var 来源： https://www.cnblogs.com/soaring-sun/p/15128159.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。