【jQuery + bootstrap】實現(xiàn)常用的商品規(guī)格添加并生成表格

2020-12-08更新

修復(fù)了一些小bug
  1. 在規(guī)格參數(shù)中輸入1個字符以上時會根據(jù)字符串長度n生成n個列
  2. 在只有一個規(guī)格時，計算生成表格行時會出錯
添加的功能
  1. 計算表格數(shù)據(jù)
更改后的demo
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link  rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.js"></script>
    <style>
        .form-control {width: 200px!important;}
    </style>
</head>
<body>
    <div class="container mt-5">
        <div class="mb-3">
            <input type="button" class="btn btn-sm btn-primary" value="添加商品規(guī)格" id="add-spec">
            <input type="button" class="btn btn-sm btn-primary" value="生成表格" id="reflash">
            <input type="button" class="btn btn-sm btn-primary" value="計算表格" id="conputeTable">
        </div>
        <div id="content">
        </div>
        <div id="table-list"></div>
    </div>
</body>
<script>
    // 笛卡爾積
    var Cartesian = function(a, b) {
        var ret = [];
        for (var i = 0; i < a.length; i++) {
            for (var j = 0; j < b.length; j++) {
                ret.push(ft(a[i], b[j]));
            }
        }
        return ret;
    }
    var ft = function(a, b) {
        if (! (a instanceof Array)) a = a;
        var ret = Array();
        ret.push(a, b);
        return ret;
    }
    //多個一起做笛卡爾積
    multiCartesian = function(data) {
        var len = data.length;
        if (len == 0) return [];
        else if (len == 1) return data[0];
        else {
            var r = data[0];
            for (var i = 1; i < len; i++) {
                r = Cartesian(r, data[i]);
            }
            return r;
        }
    }

    // 規(guī)格模板
    var specNameHtml = `<div class="spec-list mb-2">
                            <div class="d-flex align-items-center spec-item">
                                <input type="text" class="form-control" name="spec_name" placeholder="規(guī)格名稱">
                                <input type="button" class="btn btn-sm btn-dark ml-1 mr-1" value="添加參數(shù)" id="add-params">
                                <input type="button" class="btn btn-sm btn-dark ml-1 mr-1" value="刪除規(guī)格" id="del-spec">
                            </div>
                            <div class="mt-2 params-list">
                            </div>
                        </div>`;

    var specParamsHtml = `<div class="d-flex align-items-center mt-1 ml-3">
                            <input type="text" class="form-control" name="spec_param" placeholder="參數(shù)名稱">
                            <input type="button" class="btn btn-sm btn-dark ml-1 mr-1" value="刪除參數(shù)" id="del-params">
                         </div>`;
    // 添加規(guī)格
    $(document).on('click', '#add-spec', function () {
       $('#content').append(specNameHtml);
    })

    // 刪除規(guī)格
    $(document).on('click', '#del-spec', function () {
        $(this).parents('.spec-list').remove();
    })

    // 添加參數(shù)
    $(document).on('click', '#add-params', function () {
        $(this).parents('.spec-list').find('.params-list').append(specParamsHtml)
    })

    // 刪除參數(shù)
    $(document).on('click', '#del-params', function () {
        $(this).parent().remove();
    })

    // // 刷新表格
    $(document).on('click', '#reflash', function () {
        if ($('#content').children().length == 0) {
            return;
        }

        // 存放規(guī)格名稱
        var spec_name = [];
        // 存放規(guī)格參數(shù)
        var spec_param = [];
        // 規(guī)格名稱輸入框組
        var specNameList = $('input[name="spec_name"]');
        // 將表單內(nèi)的用戶輸入加入數(shù)組中
        for (var i = 0; i < specNameList.length; i++) {
            spec_name.push($(specNameList[i]).val())
            // 規(guī)格參數(shù)組
            var paramsList = $(specNameList[i]).parents('.spec-list').find('.params-list').find('input[name="spec_param"]')
            var params = []
            if (paramsList.length > 0) {
                for (var j = 0; j < paramsList.length; j++) {
                    params.push($(paramsList[j]).val())
                }
            }
            spec_param.push(params)
        }
        console.log(spec_param)
        // 笛卡爾積計算得出一共有多少規(guī)格
        var cartesianList = multiCartesian(spec_param)
        console.log(cartesianList)
        // 表格渲染
        var tb = '';
        tb += `<table id="spec_table" class="table table-stiped">
                <thead>
                    <tr>`;
                // 將規(guī)格名稱加入表格列中
        for (var i = 0; i < spec_name.length; i++) {
            tb += `     <th>`+ spec_name[i] +`</th>`;
        }

        // 擴展字段，可刪減
        tb += `         <th>原價</th>
                        <th>折扣價</th>
                        <th>庫存</th>`;


        tb += `     </tr>`;
        tb += `</thead>`;
        tb += `<tbody>`;
        // 將上面計算出來的規(guī)格數(shù)組進行拆分重組，再加入表格中
        for (var i = 0; i < cartesianList.length; i++) {
            tb += `<tr>`;
            try {
                var rows = cartesianList[i].flat()
                for (var j = 0; j < rows.length; j++) {
                    tb += `<td>`+ rows[j] +`</td>`;
                }
            } catch {
                var rows = cartesianList[i]
                tb += `<td>`+ rows +`</td>`;
            }
            // 擴展字段，可刪減
            tb += `    <td>
                           <input type="text" class="form-control" name="[spec_cost_price]" placeholder="原價" value="0">
                       </td>`;
            tb += `    <td>
                           <input type="text" class="form-control" name="[spec_discount_price]" placeholder="折扣價" value="0">
                       </td>`;
            tb += `    <td>
                       <input type="text" class="form-control" name="[spec_sku]" placeholder="庫存" value="0">
                       </td>`;
            tb += `</tr>`;
        }
        tb += `</tbody>`;
        tb += `</table>`;
        $('#table-list').html(tb);
    })

    $('#conputeTable').on('click', function () {
        if ($('#table-list').children().length == 0) {
            return
        }
        var data = []
        var table = $('#table-list').find('#spec_table');
        var content = $(table).find('tbody');
        $(content).find('tr').each((k, i) => {
            let row = [];
            $(i).find('td').each((tdk, tditem) => {
                if ($(tditem).find('input').length > 0) {
                    row.push($(tditem).find('input').val())
                }else {
                    row.push($(tditem).text().trim())
                }
            })
            data.push(row)
        })  
        console.log(data)
    })
</script>
</html>

以下是原文

整理整合一份后臺管理中商品規(guī)格添加顯示的demo供大家參考，cv就可以看到效果，如果有更好的方法歡迎討論

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link  rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.js"></script>
    <style>
        .form-control {width: 200px!important;}
    </style>
</head>
<body>
    <div class="container mt-5">
        <div class="mb-3">
            <input type="button" class="btn btn-sm btn-primary" value="添加商品規(guī)格" id="add-spec">
            <input type="button" class="btn btn-sm btn-primary" value="刷新表格" id="reflash">
        </div>
        <div id="content">
        </div>
        <div id="table-list"></div>
    </div>
</body>
<script>
    // 笛卡爾積
    var Cartesian = function(a, b) {
        var ret = [];
        for (var i = 0; i < a.length; i++) {
            for (var j = 0; j < b.length; j++) {
                ret.push(ft(a[i], b[j]));
            }
        }
        return ret;
    }
    var ft = function(a, b) {
        if (! (a instanceof Array)) a = [a];
        var ret = Array.call(null, a);
        ret.push(b);
        return ret;
    }
    //多個一起做笛卡爾積
    multiCartesian = function(data) {
        var len = data.length;
        if (len == 0) return [];
        else if (len == 1) return data[0];
        else {
            var r = data[0];
            for (var i = 1; i < len; i++) {
                r = Cartesian(r, data[i]);
            }
            return r;
        }
    }

    // 規(guī)格模板
    var specNameHtml = `<div class="spec-list mb-2">
                            <div class="d-flex align-items-center spec-item">
                                <input type="text" class="form-control" name="spec_name" placeholder="規(guī)格名稱">
                                <input type="button" class="btn btn-sm btn-info ml-1 mr-1" value="添加參數(shù)" id="add-params">
                                <input type="button" class="btn btn-sm btn-info ml-1 mr-1" value="刪除規(guī)格" id="del-spec">
                            </div>
                            <div class="mt-2 params-list">
                            </div>
                        </div>`;

    var specParamsHtml = `<div class="d-flex align-items-center mt-1 ml-3">
                            <input type="text" class="form-control" name="spec_param" placeholder="參數(shù)名稱">
                            <input type="button" class="btn btn-sm btn-info ml-1 mr-1" value="刪除參數(shù)" id="del-params">
                         </div>`;
    // 添加規(guī)格
    $(document).on('click', '#add-spec', function () {
       $('#content').append(specNameHtml);
    })

    // 刪除規(guī)格
    $(document).on('click', '#del-spec', function () {
        $(this).parents('.spec-list').remove();
    })

    // 添加參數(shù)
    $(document).on('click', '#add-params', function () {
        $(this).parents('.spec-list').find('.params-list').append(specParamsHtml)
    })

    // 刪除參數(shù)
    $(document).on('click', '#del-params', function () {
        $(this).parent().remove();
    })

    // // 刷新表格
    $(document).on('click', '#reflash', function () {
        if ($('#content').children().length == 0) {
            return;
        }

        // 存放規(guī)格名稱
        var spec_name = [];
        // 存放規(guī)格參數(shù)
        var spec_param = [];
        // 規(guī)格名稱輸入框組
        var specNameList = $('input[name="spec_name"]');
        // 將表單內(nèi)的用戶輸入加入數(shù)組中
        for (var i = 0; i < specNameList.length; i++) {
            spec_name.push($(specNameList[i]).val())
            // 規(guī)格參數(shù)組
            var paramsList = $(specNameList[i]).parents('.spec-list').find('.params-list').find('input[name="spec_param"]')
            var params = []
            if (paramsList.length > 0) {
                for (var j = 0; j < paramsList.length; j++) {
                    params.push($(paramsList[j]).val())
                }
            }
            spec_param.push(params)
        }
        // 笛卡爾積計算得出一共有多少規(guī)格
        var cartesianList = multiCartesian(spec_param)


        // 表格渲染
        var tb = '';
        tb += `<table class="table table-stiped">
                <thead>
                    <tr>`;
                // 將規(guī)格名稱加入表格列中
        for (var i = 0; i < spec_name.length; i++) {
            tb += `     <th>`+ spec_name[i] +`</th>`;
        }

        // 擴展字段，可刪減
        tb += `         <th>原價</th>
                        <th>折扣價</th>
                        <th>庫存</th>`;


        tb += `     </tr>`;
        tb += `</thead>`;
        tb += `<tbody>`;
        tb += `</tbody>`;

        // 將上面計算出來的規(guī)格數(shù)組進行拆分重組，再加入表格中
        for (var i = 0; i < cartesianList.length; i++) {
            tb += `<tr>`;
            var rows = cartesianList[i] instanceof Array ? cartesianList[i].join('').split(',') : cartesianList[i].split(',');

            for (var j = 0; j < rows.length; j++) {
                tb += `<td>`+ rows[j] +`</td>`;
            }

            // 擴展字段，可刪減
            tb += `    <td>
                           <input type="text" class="form-control" name="`+ rows[j] +`[cost_price]" placeholder="原價">
                       </td>`;
            tb += `    <td>
                           <input type="text" class="form-control" name="`+ rows[j] +`[discount_price]" placeholder="折扣價">
                       </td>`;
            tb += `    <td>
                       <input type="text" class="form-control" name="`+ rows[j] +`[sku]" placeholder="庫存">
                       </td>`;
            tb += `</tr>`;
        }
        tb += `</table>`;
        $('#table-list').html(tb);
    })
</script>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容