论坛 › 开发技术 › 商城商品多规格JQ前端代码实现

admin 发表于 2024-5-25 18:06:49

商城商品多规格JQ前端代码实现

<!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');
            if (!lv1Arr || lv1Arr.length == 0) {
                $('#lv_table_con').hide();
                $('#lv_table').html('');
                return;
            }
            for (var i = 0; i < lv1Arr.length; i++) {
                var lv2Arr = $(lv1Arr).parents('.lv1').find('input');
                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).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).parents('.lv1').find('input').length);
                idxArr = 0;
            }

            var len = 1;
            var rowsArr = new Array();
            for (var i = 0; i < numsArr.length; i++) {
                //len记录参数总行数
                len = len * numsArr;

                var tmpnum = 1;
                for (var j = numsArr.length - 1; j > i; j--) {
                  tmpnum = tmpnum * numsArr;
                }
                //当前规格每个参数所占行数
                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);
                  if (j == 0) {
                  } else if (j == lv1Arr.length - 1) {
                        n = idxArr;
                        if (idxArr + 1 >= numsArr) {
                            idxArr = 0;
                        } else {
                            idxArr++;
                        }
                  } else {
                        var m = parseInt(i / rowsArr);
                        n = m % numsArr;
                  }

                  var text = $(lv1Arr).parents('.lv1').find('input').eq(n).val();
                  if (j != lv1Arr.length - 1) {
                        name += text + '_';
                  } else {
                        name += text;
                  }

                  if (i % rowsArr == 0) {
                        tableHTML += '<td width="50" rowspan="' + rowsArr + '" data-rc="' + (i+1) + '_' + (j+1) + '">' + text + '</td>';
                  }
                }

                tableHTML += '<td width="20"><input type="text" name="' + name + '" /></td>';
                tableHTML += '<td width="20"><input type="text" name="' + name + '" /></td>';
                tableHTML += '</tr>';
            }
            tableHTML += '</tbody>';
            tableHTML += '</table>';

            $('#lv_table_con').show();
            $('#lv_table').html(tableHTML);
      });
    });
</script>

查看完整版本: 商城商品多规格JQ前端代码实现