商品规格设计与生成: 样式
商品规格设计与生成: 样式
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script> ;!function(){"use strict";var f,b={open:"{{",close:"}}"},c={exp:function(a){return new RegExp(a,"g")},query:function(a,c,e){var f=["#([\\s\\S])+?","([^{#}])*?"][a||0];return d((c||"")+b.open+f+b.close+(e||""))},escape:function(a){return String(a||"").replace(/&(?!#?[a-zA-Z0-9]+;)/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/'/g,"'").replace(/"/g,""")},error:function(a,b){var c="Laytpl Error:";return"object"==typeof console&&console.error(c+a+"\n"+(b||"")),c+a}},d=c.exp,e=function(a){this.tpl=a};e.pt=e.prototype,e.pt.parse=function(a,e){var f=this,g=a,h=d("^"+b.open+"#",""),i=d(b.close+"$","");a=a.replace(/[\r\t\n]/g," ").replace(d(b.open+"#"),b.open+"# ").replace(d(b.close+"}"),"} "+b.close).replace(/\\/g,"\\\\").replace(/(?="|')/g,"\\").replace(c.query(),function(a){return a=a.replace(h,"").replace(i,""),'";'+a.replace(/\\/g,"")+'; view+="'}).replace(c.query(1),function(a){var c='"+(';return a.replace(/\s/g,"")===b.open+b.close?"":(a=a.replace(d(b.open+"|"+b.close),""),/^=/.test(a)&&(a=a.replace(/^=/,""),c='"+_escape_('),c+a.replace(/\\/g,"")+')+"')}),a='"use strict";var view = "'+a+'";return view;';try{return f.cache=a=new Function("d, _escape_",a),a(e,c.escape)}catch(j){return delete f.cache,c.error(j,g)}},e.pt.render=function(a,b){var e,d=this;return a?(e=d.cache?d.cache(a,c.escape):d.parse(d.tpl,a),b?(b(e),void 0):e):c.error("no data")},f=function(a){return"string"!=typeof a?c.error("Template not found"):new e(a)},f.config=function(a){a=a||{};for(var c in a)b[c]=a[c]},f.v="1.1","function"==typeof define?define(function(){return f}):"undefined"!=typeof exports?module.exports=f:window.laytpl=f}(); </script> <script id="J_sku_table_content" type="text/html"> <table class="sku-table J_sku_table"> <thead> <tr> <th>#</th> <th>颜色</th> <th>地区</th> <th>容量</th> </tr> </thead> <tbody> {{# $.each(d.list, function(index, item){ }} <tr data-val=""> <td>{{index+1}}</td> {{# $.each(item, function(index_v, item_v){ }} <td>{{item_v.name}}</td> {{# }) }} </tr> {{# }) }} </tbody> </table> </script> <div id="J_sku_table_container"></div> <script> var data = [ [{ "title": "颜色", "title_k": "color", "title_id": "1", "name": "红色", "id": 1 }, { "title": "颜色", "title_k": "color", "title_id": "1", "name": "蓝色", "id": 2 }], [{ "title": "区域", "title_k": "region", "title_id": "2", "name": "中国大陆", "id": 3 }, { "title": "区域", "title_k": "region", "title_id": "2", "name": "港版", "id": 4 }, { "title": "区域", "title_k": "region", "title_id": "2", "name": "港版xx", "id": 4 } ], [{ "title": "大小", "title_k": "size", "title_id": "3", "name": "16G", "id": 5 }, { "title": "大小", "title_k": "size", "title_id": "3", "name": "32G", "id": 6 }, { "title": "大小", "title_k": "size", "title_id": "3", "name": "100G", "id": 6 } ] ]; function cartesianProductOf() { return Array.prototype.reduce.call(arguments, function (a, b) { var ret = []; a.forEach(function (a) { b.forEach(function (b) { ret.push(a.concat([b])); }); }); return ret; }, [[]]); } var list_data = cartesianProductOf(data[0], data[1], data[2]); var new_data ={"list":list_data}; var gettpl = document.getElementById('J_sku_table_content').innerHTML; var max_rowspan = data[1].length * data[2].length; laytpl(gettpl).render(new_data, function (html) { document.getElementById('J_sku_table_container').innerHTML = html; processTable(); //执行入口 }); function initTable() { $('.J_sku_table tbody tr').each(function (i, v) { var data_field = ''; $(v).find('td').each(function (ii, vv) { if (ii == 0) return; data_field = data_field + $(this).text(); $(this).attr('data-field', data_field); }); }); } function processTable() { initTable(); var rowspan = {}; $('.J_sku_table tbody tr td').each(function (i, v) { var data_field = $(v).attr('data-field'); if (data_field != '' && typeof data_field != 'undefined') { if (!rowspan[data_field]) rowspan[data_field] = 0; rowspan[data_field]++; } }); var has_rowspan = {}; $('.J_sku_table tbody tr td').each(function (i, v) { var data_field = $(v).attr('data-field'); if (data_field != '' && typeof data_field != 'undefined') { if (has_rowspan[data_field]) { $(v).hide(); } else if (rowspan[data_field]) { $(v).attr('rowspan', rowspan[data_field]) has_rowspan[data_field] = true; } } }); } </script> <style type="text/css"> table.sku-table { font-size: 14px; color: #333; border-width: 1px; border-color: #ddd; margin: 30px; border-collapse: collapse } table.sku-table th { border-width: 1px; padding: 10px; border-style: solid; border-color: #ddd; color: #666; background-color: #ededed } table.sku-table td { border-width: 1px; padding: 5px 10px; border-style: solid; border-color: #ddd; background-color: #fff; color: #777; width: auto; text-align: center; font-size: 12px } table.sku-table td input { width: 100%; border: 0; font-size: 14px; padding: 0; margin: 0; color: #666; text-align: center } input[type=text] { height: 24px; display: inline-block; padding: 2px 12px; font-size: 14px; line-height: 24px; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s } input[type=text]:focus { border-color: #66afe9; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6) } button:focus { outline: 0 } </style>