最近商品后台需要添加商品多规格的需求，具体是：用户可以自定义规格以及参数，然后再自定义组合规格参数生成商品表单编辑商品信息；
这个功能我做了两次都以失败告终，越做越复杂，在网上看到某位大神的小demo，感觉很好就放出来做参考：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"> </head> <body> <div class="control-group"> <label class="control-label"> </label> <div class="controls"> <button id="add_lv1" class="btn btn-primary" type="button">添加规格项</button> <button id="update_table" class="btn btn-success" type="button">刷新规格项目表</button> </div> </div> <div id="lv_table_con" class="control-group" style="display: none;"> <label class="control-label">规格项目表</label> <div class="controls"> <div id="lv_table"> </div> </div> </div> <script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script> var lv1HTML = '<div class="control-group lv1">' + '<label class="control-label">规格名称</label>' + '<div class="controls">' + '<input type="text" name="lv1" placeholder="规格名称">' + '<button class="btn btn-primary add_lv2" type="button">添加参数</button>' + '<button class="btn btn-danger remove_lv1" type="button">删除规格</button>' + '</div>' + '<div class="controls lv2s"></div>' + '</div>'; var lv2HTML = '<div style="margin-top: 5px;">' + '<input type="text" name="lv2" placeholder="参数名称">' + '<button class="btn btn-danger remove_lv2" type="button">删除参数</button>' + '</div>'; $(document).ready(function() { $('#add_lv1').on('click', function() { var last = $('.control-group.lv1:last'); if (!last || last.length == 0) { $(this).parents('.control-group').eq(0).after(lv1HTML); } else { last.after(lv1HTML); } }); $(document).on('click', '.remove_lv1', function() { $(this).parents('.lv1').remove(); }); $(document).on('click', '.add_lv2', function() { $(this).parents('.lv1').find('.lv2s').append(lv2HTML); }); $(document).on('click', '.remove_lv2', function() { $(this).parent().remove(); }); $('#update_table').on('click', function() { var lv1Arr = $('input[name="lv1"]'); if (!lv1Arr || lv1Arr.length == 0) { $('#lv_table_con').hide(); $('#lv_table').html(''); return; } for (var i = 0; i < lv1Arr.length; i++) { var lv2Arr = $(lv1Arr[i]).parents('.lv1').find('input[name="lv2"]'); if (!lv2Arr || lv2Arr.length == 0) { alert('请先删除无参数的规格项！'); return; } } var tableHTML = ''; tableHTML += '<table class="table table-bordered">'; tableHTML += ' <thead>'; tableHTML += ' <tr>'; for (var i = 0; i < lv1Arr.length; i++) { tableHTML += '<th width="50">' + $(lv1Arr[i]).val() + '</th>'; } tableHTML += ' <th width="20">现价</th>'; tableHTML += ' <th width="20">原价</th>'; tableHTML += ' </tr>'; tableHTML += ' </thead>'; tableHTML += ' <tbody>'; var numsArr = new Array(); var idxArr = new Array(); for (var i = 0; i < lv1Arr.length; i++) { numsArr.push($(lv1Arr[i]).parents('.lv1').find('input[name="lv2"]').length); idxArr[i] = 0; } var len = 1; var rowsArr = new Array(); for (var i = 0; i < numsArr.length; i++) { len = len * numsArr[i]; var tmpnum = 1; for (var j = numsArr.length - 1; j > i; j--) { tmpnum = tmpnum * numsArr[j]; } rowsArr.push(tmpnum); } for (var i = 0; i < len; i++) { tableHTML += ' <tr data-row="' + (i+1) + '">'; var name = ''; for (var j = 0; j < lv1Arr.length; j++) { var n = parseInt(i / rowsArr[j]); if (j == 0) { } else if (j == lv1Arr.length - 1) { n = idxArr[j]; if (idxArr[j] + 1 >= numsArr[j]) { idxArr[j] = 0; } else { idxArr[j]++; } } else { var m = parseInt(i / rowsArr[j]); n = m % numsArr[j]; } var text = $(lv1Arr[j]).parents('.lv1').find('input[name="lv2"]').eq(n).val(); if (j != lv1Arr.length - 1) { name += text + '_'; } else { name += text; } if (i % rowsArr[j] == 0) { tableHTML += '<td width="50" rowspan="' + rowsArr[j] + '" data-rc="' + (i+1) + '_' + (j+1) + '">' + text + '</td>'; } } tableHTML += '<td width="20"><input type="text" name="' + name + '[price]" /></td>'; tableHTML += '<td width="20"><input type="text" name="' + name + '[original_price]" /></td>'; tableHTML += '</tr>'; } tableHTML += '</tbody>'; tableHTML += '</table>'; $('#lv_table_con').show(); $('#lv_table').html(tableHTML); }); }); </script> </body> </html>
需要的可以直接copy看效果演示