jQuery自動生成表格、自動合併指定單元格（以商品規格為例）
阿新 • • 發佈：2021-08-11
今天接到一個需求，要求輸出一個商品規格表。點選“新增規格”，展示規格名、規格值。規格名和規格值必填，若勾選了“新增規格圖片”，規格圖片也必填。規格名和規格值最多不得多於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="+"> <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>
示例執行結果如下圖所示：