最近在做一个商城的项目，设计到添加商品的多规格时遇到了难题，数据结构设计好了，但是发现我这个菜鸡写不出来动态渲染多规格表格，于是乎在网上找到了这部分代码，废话不多说，直接上代码，直接复制到本地环境测试就好
<!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();
//numsArr记录每个规格又多少个参数，并用idxarr记录规格数组下标 方便后边标记name
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 = 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>
代码里面我在看的时候加入了自己的注释，说实话，生成表格这部分代码，我自己确实写不出来，建议写不出来的用生成表格的插件把，这个是纯前端代码，需要调用接口等 需要简单更改一下，代码只是提供参考。感谢贴出此代码的人
网友评论