<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="Scripts/jquery-1.8.2.min.js"></script>
<title></title>
<script>
$(function () {
//SKU信息
$(".div_contentlist label").bind("change", function () {
step.Creat_Table();
});
var step = {
//SKU信息组合
Creat_Table: function () {
step.hebingFunction();
var SKUObj = $(".Father_Title");
//var skuCount = SKUObj.length;//
var arrayTile = new Array(); //标题组数
var arrayInfor = new Array(); //盛放每组选中的CheckBox值的对象
var arrayColumn = new Array();//指定列，用来合并哪些列
var bCheck = true;//是否全选
var columnIndex = 0;
$.each(SKUObj, function (i, item) {
arrayColumn.push(columnIndex);
columnIndex++;
arrayTile.push(SKUObj.find("li").eq(i).html().replace("：", ""));
var itemName = "Father_Item" + i;
//选中的CHeckBox取值
var order = new Array();
$("." + itemName + " input[type=checkbox]:checked").each(function () {
order.push($(this).val());
});
arrayInfor.push(order);
if (order.join() == "") {
bCheck = false;
}
//var skuValue = SKUObj.find("li").eq(index).html();
});
//开始创建Table表
if (bCheck == true) {
var RowsCount = 0;
$("#createTable").html("");
var table = $("<table id=\"process\" border=\"1\" cellpadding=\"1\" cellspacing=\"0\" style=\"width:100%;padding:5px;\"></table>");
table.appendTo($("#createTable"));
var thead = $("<thead></thead>");
thead.appendTo(table);
var trHead = $("<tr></tr>");
trHead.appendTo(thead);
//创建表头
$.each(arrayTile, function (index, item) {
var td = $("<td>" + item + "</td>");
td.appendTo(trHead);
});
var itemColumHead = $("<td style=\"width:70px;\">价格</td><td style=\"width:70px;\">数量</td> ");
itemColumHead.appendTo(trHead);
//var itemColumHead2 = $("<td >商家编码</td><td >商品条形码</td>");
//itemColumHead2.appendTo(trHead);
var tbody = $("<tbody></tbody>");
tbody.appendTo(table);
////生成组合
var zuheDate = step.doExchange(arrayInfor);
if (zuheDate.length > 0) {
//创建行
$.each(zuheDate, function (index, item) {
var td_array = item.split(",");
var tr = $("<tr></tr>");
tr.appendTo(tbody);
$.each(td_array, function (i, values) {
var td = $("<td>" + values + "</td>");
td.appendTo(tr);
});
var td1 = $("<td ><input name=\"Txt_PriceSon\" class=\"l-text\" type=\"text\" value=\"\"></td>");
td1.appendTo(tr);
var td2 = $("<td ><input name=\"Txt_CountSon\" class=\"l-text\" type=\"text\" value=\"\"></td>");
td2.appendTo(tr);
//var td3 = $("<td ><input name=\"Txt_NumberSon\" class=\"l-text\" type=\"text\" value=\"\"></td>");
//td3.appendTo(tr);
//var td4 = $("<td ><input name=\"Txt_SnSon\" class=\"l-text\" type=\"text\" value=\"\"></td>");
//td4.appendTo(tr);
});
}
//结束创建Table表
arrayColumn.pop();//删除数组中最后一项
//合并单元格
$(table).mergeCell({
// 目前只有cols这么一个配置项, 用数组表示列的索引,从0开始
cols: arrayColumn
});
}
},//合并行
hebingFunction: function () {
$.fn.mergeCell = function (options) {
return this.each(function () {
var cols = options.cols;
for (var i = cols.length - 1; cols[i] != undefined; i--) {
// fixbug console调试
// console.debug(cols[i]);
mergeCell($(this), cols[i]);
}
dispose($(this));
});
};
// 如果对javascript的closure和scope概念比较清楚, 这是个插件内部使用的private方法
function mergeCell($table, colIndex) {
$table.data('col-content', ''); // 存放单元格内容
$table.data('col-rowspan', 1); // 存放计算的rowspan值 默认为1
$table.data('col-td', $()); // 存放发现的第一个与前一行比较结果不同td(jQuery封装过的), 默认一个"空"的jquery对象
$table.data('trNum', $('tbody tr', $table).length); // 要处理表格的总行数, 用于最后一行做特殊处理时进行判断之用
// 我们对每一行数据进行"扫面"处理 关键是定位col-td, 和其对应的rowspan
$('tbody tr', $table).each(function (index) {
// td:eq中的colIndex即列索引
var $td = $('td:eq(' + colIndex + ')', this);
// 取出单元格的当前内容
var currentContent = $td.html();
// 第一次时走此分支
if ($table.data('col-content') == '') {
$table.data('col-content', currentContent);
$table.data('col-td', $td);
} else {
// 上一行与当前行内容相同
if ($table.data('col-content') == currentContent) {
// 上一行与当前行内容相同则col-rowspan累加, 保存新值
var rowspan = $table.data('col-rowspan') + 1;
$table.data('col-rowspan', rowspan);
// 值得注意的是 如果用了$td.remove()就会对其他列的处理造成影响
$td.hide();
// 最后一行的情况比较特殊一点
// 比如最后2行 td中的内容是一样的, 那么到最后一行就应该把此时的col-td里保存的td设置rowspan
if (++index == $table.data('trNum'))
$table.data('col-td').attr('rowspan', $table.data('col-rowspan'));
} else { // 上一行与当前行内容不同
// col-rowspan默认为1, 如果统计出的col-rowspan没有变化, 不处理
if ($table.data('col-rowspan') != 1) {
$table.data('col-td').attr('rowspan', $table.data('col-rowspan'));
}
// 保存第一次出现不同内容的td, 和其内容, 重置col-rowspan
$table.data('col-td', $td);
$table.data('col-content', $td.html());
$table.data('col-rowspan', 1);
}
}
});
}
// 同样是个private函数 清理内存之用
function dispose($table) {
$table.removeData();
}
},
//组合数组
doExchange: function (doubleArrays) {
var len = doubleArrays.length;
if (len >= 2) {
var arr1 = doubleArrays[0];
var arr2 = doubleArrays[1];
var len1 = doubleArrays[0].length;
var len2 = doubleArrays[1].length;
var newlen = len1 * len2;
var temp = new Array(newlen);
var index = 0;
for (var i = 0; i < len1; i++) {
for (var j = 0; j < len2; j++) {
temp[index] = arr1[i] + "," + arr2[j];
index++;
}
}
var newArray = new Array(len - 1);
newArray[0] = temp;
if (len > 2) {
var _count = 1;
for (var i = 2; i < len; i++) {
newArray[_count] = doubleArrays[i];
_count++;
}
}
//console.log(newArray);
return step.doExchange(newArray);
}
else {
return doubleArrays[0];
}
}
}
return step;
})
</script>
<style type="text/css">
form {
margin: 0;
}
textarea {
display: block;
}
</style>
<style>
.chcBox_Width {
width: 18px;
}
.li_width {
width: 110px;
}
.guige_ul {
padding-left: 20px;
background-color: #F8F8F8;
}
.table_head {
line-height: 23px;
margin-left: 20px;
border-color: #D7D7D7;
}
</style>
<link href="Content/css/addProduct.css" rel="stylesheet" />
</head>
<body style="padding: 10px">
<div id="navtab1" style="width: 100%; border: 1px solid #A3C0E8;">
<div title="扩展信息" tabid="tabItem3">
<div id="Div1">
<div position="center">
<div style="padding: 5px 8px;" class="div_content">
<div class="div_title">
<span class="infor_title"> </span>产品规格
<div>
<hr />
</div>
</div>
<div class="div_contentlist">
<ul class="Father_Title">
<li>颜色分类：</li>
</ul>
<ul class="Father_Item0" style="padding-left: 20px; background-color: #F8F8F8;">
<li class="li_width1">
<label>
<input id="Checkbox3" type="checkbox" class="chcBox_Width" value="军绿色" />军绿色<span class="li_empty"> </span></label></li>
<li class="li_width">
<label>
<input id="Checkbox1" type="checkbox" class="chcBox_Width" value="花色" />花色<span class="li_empty"> </span></label></li>
<li class="li_width">
<label>
<input id="Checkbox2" type="checkbox" class="chcBox_Width" value="蓝色" />蓝色<span class="li_empty"> </span></label></li>
<li class="li_width">
<label>
<input id="Checkbox4" type="checkbox" class="chcBox_Width" value="褐色" />褐色<span class="li_empty"> </span></label></li>
<li class="li_width">
<label>
<input id="Checkbox5" type="checkbox" class="chcBox_Width" value="黄色" />黄色<span class="li_empty"> </span></label></li>
<li class="li_width">
<label>
<input id="Checkbox6" type="checkbox" class="chcBox_Width" value="黑色" />黑色<span class="li_empty"> </span></label></li>
</ul>
<ul class="Father_Title">
<li>尺寸：</li>
</ul>
<ul class="Father_Item1" style="padding-left: 20px; background-color: #F8F8F8;">
<li class="li_width">
<label>
<input id="Checkbox7" type="checkbox" class="chcBox_Width" value="41" />41<span class="li_empty"> </span></label></li>
<li class="li_width">
<label>
<input id="Checkbox8" type="checkbox" class="chcBox_Width" value="42" />42<span class="li_empty"> </span></label></li>
<li class="li_width">
<label>
<input id="Checkbox9" type="checkbox" class="chcBox_Width" value="43" />43<span class="li_empty"> </span></label></li>
</ul>
<ul class="Father_Title">
<li>类型：</li>
</ul>
<ul class="Father_Item2" style="padding-left: 20px; background-color: #F8F8F8;">
<li class="li_width">
<label>
<input id="Checkbox10" type="checkbox" class="chcBox_Width" value="港澳台" /><span class="Color_Name">港澳台</span><span class="li_empty"> </span></label></li>
<li class="li_width">
<label>
<input id="Checkbox11" type="checkbox" class="chcBox_Width" value="韩国" />韩国<span class="li_empty"> </span></label></li>
<li class="li_width">
<label>
<input id="Checkbox12" type="checkbox" class="chcBox_Width" value="亚太" />亚太<span class="li_empty"> </span></label></li>
</ul>
</div>
<div class="div_contentlist2">
<ul>
<li>
<div id="createTable">
</div>
</li>
</ul>
<ul>
<li>
<input type="button" id="Button1" class="l-button" value="提交" />
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>