功能：各种属性的值选中后，SKU填写表格进行变动，对属性、属性值的数量自适应，编辑时不因去掉勾选导致原有值不显示

所有代码均属原创，现在共享，如果有更好的实现方式，希望互相交流

最终实现效果图

HTML代码

JAVASCRIPT代码

//如为编辑页面，HTML代码的Input需设置为checked，JS部分没有去做判断

//后端传过来的值，编辑SKU时使用，新建时设置为{}

/*

var query = {

'1_5_7':{

'price':'258',

'scan':'690001',

'sku':'H10GH'

},

'1_6_7':{

'price':'278',

'scan':'',

'sku':'H18GH'

},

'1_5_8':{

'price':'258',

'scan':'',

'sku':'H10GL'

},

'1_6_8':{

'price':'278',

'scan':'',

'sku':'H18GL'

}

};*/

var query = {};

var linekey = [];//初始化表格行内输入框的key值

$(function(){

$(':checkbox').on('ifChecked',function(){

$(this).attr('checked', true);

buildT();

});

$(':checkbox').on('ifUnchecked',function(){

$(this).removeAttr('checked');

buildT();

});

//buildT();//如果是编辑页面，去掉注释进行表格初始化

});

function buildT(){

var specs = [];

var maxline = 1;//初始化SKU最大行数

$('#specList').children().each(function(){

var _checkobj = $(this).find(':checked'), _list = [];

if(_checkobj.length == 0){

return;

}

$(_checkobj).each(function(index,item){

_list.push({

'title':$(item).parent().next().html(),//由于使用了iCheck插件，层级关系发生了变化，需要使用parent()来重新定位lable标签的值

'id':$(item).val()

});

});

data = {

'id': $(this).attr('server-id'),

'title':$(this).attr('server-name'),

'count':_checkobj.length,

'childlist':_list

}

maxline = maxline*parseInt(_checkobj.length);

specs.push(data);

});

//循环获取rowspan值

var yu = 1;

$(specs).each(function(index){

specs[index].row = (maxline/specs[index]['count'])/yu;

yu = yu*specs[index].count;

});

//构建表格行数据

var headarr = [], tbodyarr = [];

$(specs).each(function(index, item){

headarr.push(item.title);

tbodyarr = buildTT(tbodyarr, item);

});

var headdata = '', tbodydata = '';

$.each(headarr, function(index){

headdata += '

'+headarr[index]+'';

});

headdata += '

价格条形码SKU';

$.each(tbodyarr, function(index){

tbodydata += '

'

+tbodyarr[index]

+'

'

+'

'

+'

'

+'

';

});

$('#tableAttr').html('').append(''+headdata+'').append('

'+tbodydata+'');

buildTTT();

}

/**

* 构建表格每行的td值

* @param odata 前面经过处理的数据

* @param adata 需要新添加进去处理的数据

*/

function buildTT(odata, adata){

var data = [], _linekey = [];

if(odata.length==0){

$(adata.childlist).each(function(index, item){

var _data = '

'+item.title+'';

data.push(_data);

_linekey[index] = item.id;

});

}else{

var i=0;

$(odata).each(function(index, item){

$(adata.childlist).each(function(index2, item2){

var _item = index2 == 0 ? item.concat() : '';

var _data = _item + '

'+item2.title+'';

data.push(_data);

_linekey[i] = linekey[index] + '_' +item2.id;

i++;

});

});

}

linekey = _linekey;

return data;

}

function buildTTT(){

//对初始化的表格每行的key值进行排序，与入库值保持一致

$(linekey).each(function(index){

linekey[index] = linekey[index].split('_').sort().join('_');

});

//对初始化的表格input进行赋值

$('#tableAttr tbody').children('tr').each(function(index){

var _obj = $(this).find('input');

var _linekey = linekey[index];

_obj.eq(0).attr('name', 'price['+_linekey+']');

_obj.eq(1).attr('name', 'scan['+_linekey+']');

_obj.eq(2).attr('name', 'sku['+_linekey+']');

if(query[_linekey]){

_obj.eq(0).val(query[_linekey]['price']);

_obj.eq(1).val(query[_linekey]['scan']);

_obj.eq(2).val(query[_linekey]['sku']);

}

});

}

代码有一些不完善的地方，欢迎指正

前面有一篇博文，是写后台对SKU属性增删改查排序的