• jQuery自动生成表格、自动合并指定单元格(以商品规格为例)


    今天接到一个需求,要求输出一个商品规格表。点击“添加规格”,展示规格名、规格值。规格名和规格值必填,若勾选了“添加规格图片”,规格图片也必填。规格名和规格值最多不得多于10个字,一个规格下可添加多个规格值,无上限。一个规格名+多个规格值为一套规格,添加多套规格,下方的规格明细按照填写的规格信息拆分。

    如下图:

     

     demo示例代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script type="text/javascript" src="./jquery.min.js"></script> <!--引入Jquery-->>
    </head>
    <body>
        <div class="list">
            <div class="item">
                <p class="guigeName">规格名:<input type="text" value="尺寸"> <input type="checkbox" value="">添加规格图片 <input type="button" value="添加规格"></p> 
                <p class="guigeZhi">规格值:<input type="text" value="11寸"> <input type="text" value="12寸"> <input type="text" value="13寸"></p>
                <!-- <p><input type="button" value="+">&ensp;<input type="button" value="+"></p> -->
            </div>
            <div class="item">
                <p class="guigeName">规格名:<input type="text" value="颜色"></p> 
                <p class="guigeZhi">规格值:<input type="text" value="红色"> <input type="text" value="黄色"> <input type="text" value="黑色"></p>
            </div>
            <div class="item">
                <p class="guigeName">规格名:<input type="text" value="内存"></p> 
                <p class="guigeZhi">规格值:<input type="text" value="32G"> <input type="text" value="64G"> <input type="text" value="128G"></p>
            </div>
            <div class="item">
                <p class="guigeName">规格名:<input type="text" value="重量"></p> 
                <p class="guigeZhi">规格值:<input type="text" value="100g"> <input type="text" value="200g"> <input type="text" value="300g"></p>
            </div>
        </div>
    
       <table width="100%" border="1px solid" style="text-align: center;" class="tableList">
            <tr class="title"></tr>
             <!--自动生成表格-->
       </table>
       <p><button onclick="addGuiGe()">确定</button></p>
      
    </body>
    </html>
    <script>
        function addGuiGe() {
            var title = new Array();
            var values = new Array();
           //1.获取数据 
           $.each($(".list").children(), function(index, obj){
                var tempArr = new Array();
                title[index] = $(obj).children("p.guigeName").children("[type='text']").val()
                $.each($(obj).children("p.guigeZhi").children("[type='text']"), function(i, obj1){
                    tempArr[i] = $(obj1).val();
                });
                values[index] = tempArr;
            });
            //2.处理表头
            $(".title").children().remove();
            var strTitle = '';
            $.each(title, function(k, name){
                strTitle += '<td>' +name+ '</td>';
            });
            strTitle += '<td><span style="color: red;">*</span>价格</td>';
            strTitle += '<td>库存</td>';
            strTitle += '<td>规格编码</td>';
            strTitle += '<td>图片</td>';
            $(".title").append(strTitle);
            //3.处理内容
            //3.1获取列表(构建笛卡尔积)
            var list = discarts(values);
            //3.2拼接数据(输出所有数据行)
            var tableList = '';
            for(var i=0;i<list.length;i++) {
                tableList += '<tr>';
                for(var j=0;j<list[i].length;j++) {
                    tableList += '<td>' + list[i][j] + '</td>';
                } 
                tableList += '<td><input type="text" value=""></td>';    
                tableList += '<td><input type="text" value=""></td>';    
                tableList += '<td><input type="text" value=""></td>';  
                tableList += '<td><img src="#"></td>';    
                tableList += '</tr>';    
            }
            $(".tableList tr").not(':eq(0)').empty();//保留表头
            $(".tableList").append(tableList);//添加数据行至表单
            //3.3合并单元格
            $(function() {
                for(var c=0;c<values.length-1;c++) {
                    $(".tableList").rowspan(c);//传入的参数是对应的列数,下标从0开始,不使用循环进行指定时候,也可以单独指定某一列
                }
            });     
        }
    
        //将数据处理为笛卡尔积
        function discarts() {
            var twodDscartes = 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 = a.slice(0);
                ret.push(b);
                return ret;
            }
            //多个一起做笛卡尔积
            return (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 = twodDscartes(r, data[i]);
                    }
                    return r;
                }
            })(arguments.length > 1 ? arguments : arguments[0]);
        }
    
        //合并单元格
        jQuery.fn.rowspan = function(colIdx) {
            return this.each(function(){
                var that;
                $('tr', this).each(function(row) {
                    $('td:eq('+colIdx+')', this).filter(':visible').each(function(col) {
                        if (that!=null && $(this).html() == $(that).html()) {
                            rowspan = $(that).attr("rowSpan");
                            if (rowspan == undefined) {
                                $(that).attr("rowSpan",1);
                                rowspan = $(that).attr("rowSpan"); }
                            rowspan = Number(rowspan)+1;
                            $(that).attr("rowSpan",rowspan);
                            $(this).hide();
                        } else {
                            that = this;
                        }
                    });
                });
            });
        }
    </script>

    示例运行结果如下图所示:

  • 相关阅读:
    512M内存机器如何用好Mysql
    linux下查找文件和文件内容
    记“debug alipay”一事
    OFBiz中根据店铺获取产品可用库存的方法
    ubuntu中安装eclipse
    ubuntu中安装jdk
    ubuntu14.04中解压缩window中的zip文件,文件名乱码的解决方法
    apache将请求转发到到tomcat应用
    网站不能访问的原因
    birt报表图标中文显示为框框的解决方法
  • 原文地址:https://www.cnblogs.com/soaring-sun/p/15128159.html
Copyright © 2020-2023  润新知