演示效果
不多说，直接代码。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>微信自定义菜单</title> 6 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 7 </head> 8 <body> 9 <style> 10 td {padding:5px;} 11 button {padding:5px;} 12 .btnAddLv1Menu, .btnAddLv2Menu{width:100px;} 13 input,select {padding:5px; width:100px;} 14 .lv1Menu{border-color:blue;} 15 </style> 16 17 <div class="tableform"> 18 <form id='menuForm' action="http://www.baidu.com" method="post"> 19 <div class="tableform"> 20 <table width="100%" border="1" cellspacing="0" cellpadding="0" style="border:1px solid #ccc"> 21 <tr> 22 <td width="12%"><button type="button" class="btnAddLv1Menu">添加一级菜单</button></td> 23 <td width="20%">菜单名称</td> 24 <td width="20%">菜单类型</td> 25 <td width="20%">菜单值</td> 26 </tr> 27 <!-- 数据显示区域 --> 28 </table> 29 </div> 30 <div class="table-action"> 31 <button>保存</button> 32 </div> 33 </form> 34 </div> 35 <!-- 一级菜单模板 --> 36 <table id="lv1Menu_tpl" style="display: none"> 37 <tr class="lv1Menu"> 38 <td> 39 <button type="button" class="btnAddLv2Menu">添加二级菜单</button> 40 <button type="button" class="btnRemoveMenu">删除</button> 41 </td> 42 <td> 43 <input type='text' name='name' class="x-input" > 44 </td> 45 <td> 46 <select name="type" class="x-input"> 47 <option value="">一级菜单</option> 48 <option value="click">Key</option> 49 <option value="view">链接</option> 50 </select> 51 </td> 52 <td> 53 <input type='text' name='key' class="x-input hide" > 54 </td> 55 </tr> 56 </table> 57 <!-- 二级菜单模板 --> 58 <table id="lv2Menu_tpl" style="display: none"> 59 <tr class="lv2Menu"> 60 <td> 61 <button type="button" class="btnRemoveMenu" style="margin-left: 108px;">删除</button> 62 </td> 63 <td> 64 —— <input type='text' name='name' class="x-input"> 65 </td> 66 <td> 67 <select name="type" class="x-input"> 68 <option value="click" seleted>Key</option> 69 <option value="view">链接</option> 70 </select> 71 </td> 72 <td> 73 <input type='text' name='key' class="x-input" > 74 </td> 75 </tr> 76 </table> 77 <script> 78 var menus = [ 79 { 80 'name' : '必看福利', 81 'sub_button' : [ 82 {'name':'每日签到', 'type':'view', 'url':'http://www.bbc.cn/dispather.html?act=qiandao'}, 83 {'name':'超级拼团', 'type':'view', 'url':'http://www.bbc.cn/dispather.html?act=pintuan'}, 84 {'name':'下载领红包', 'type':'view', 'url':'http://www.bbc.cn/dispather.html?act=download'}, 85 ], 86 }, 87 { 88 'name' : '爱理巴巴', 89 'type' : 'view', 90 'url' : 'http://www.bbc.cn/dispather.html?act=site', 91 }, 92 { 93 'name' : '我的服务', 94 'sub_button' : [ 95 {'name':'在线客服', 'type':'click', 'key':'kefu'}, 96 {'name':'我的返利', 'type':'click', 'key':'fanli'}, 97 {'name':'商务合作', 'type':'view', 'url':'http://www.bbc.cn/dispather.html?act=hezuo'}, 98 ], 99 }, 100 ]; 101 render(menus); 102 $(function(){ 103 //添加一级菜单 104 $("#menuForm").on("click", ".btnAddLv1Menu", function(){ 105 if(menus.length >= 3){ 106 alert("最多只能添加3个一级菜单"); 107 return; 108 } 109 //数据变化 110 var menu = {'name':'', 'sub_button':[]}; 111 menus.push(menu); 112 //样式变化 113 render(menus); 114 }); 115 //添加二级菜单 116 $("#menuForm").on("click", ".btnAddLv2Menu", function(){ 117 var lv1Menu = $(this).parents(".lv1Menu"); 118 var lv2Menus = lv1Menu.nextUntil(".lv1Menu"); 119 if(lv2Menus.length >= 5){ 120 alert("最多只能添加5个二级菜单"); 121 return; 122 } 123 //数据变化 124 var lv1MenuIndex = $("#menuForm .lv1Menu").index(lv1Menu); 125 var menu = {'name':'', 'type':'key', 'key':''}; 126 menus[lv1MenuIndex]['sub_button'].push(menu); 127 128 //样式 129 render(menus); 130 }); 131 //删除菜单 132 $("#menuForm").on("click", ".btnRemoveMenu", function(){ 133 var tr = $(this).parents("tr"); 134 if(tr.hasClass("lv1Menu")){ 135 var lv1MenuIndex = $("#menuForm .lv1Menu").index(tr); 136 menus.splice(lv1MenuIndex, 1); 137 }else if(tr.hasClass("lv2Menu")){ 138 var lv1MenuIndex = tr.prevAll(".lv1Menu").length -1; 139 var lv2MenuIndex = tr.prevUntil(".lv1Menu").length; 140 menus[lv1MenuIndex]['sub_button'].splice(lv2MenuIndex, 1); 141 } 142 render(menus); 143 }); 144 //失去焦点 145 $("#menuForm").on("blur", "input", function(){ 146 var name = $(this).attr('name'); 147 var tr = $(this).parents("tr"); 148 if(tr.hasClass("lv1Menu")){ 149 var lv1MenuIndex = $("#menuForm .lv1Menu").index(tr); 150 menus[lv1MenuIndex][name] = $(this).val(); 151 }else if(tr.hasClass("lv2Menu")){ 152 var lv1MenuIndex = tr.prevAll(".lv1Menu").length -1; 153 var lv2MenuIndex = tr.prevUntil(".lv1Menu").length; 154 menus[lv1MenuIndex]['sub_button'][lv2MenuIndex][name] = $(this).val(); 155 } 156 }); 157 //下拉列表 158 $("#menuForm").on("change", "select", function(){ 159 var tr = $(this).parents("tr"); 160 var name = $(this).attr('name'); 161 var value = $(this).val(); 162 if(tr.hasClass("lv1Menu")){ 163 var lv1MenuIndex = $("#menuForm .lv1Menu").index(tr); 164 if(value){ 165 menus[lv1MenuIndex][name] = value; 166 if(value == 'click'){ 167 menus[lv1MenuIndex]['key'] = ''; 168 }else if(value == 'view'){ 169 menus[lv1MenuIndex]['url'] = ''; 170 } 171 delete menus[lv1MenuIndex]['sub_button']; 172 }else{ 173 delete menus[lv1MenuIndex]['key']; 174 delete menus[lv1MenuIndex]['url']; 175 delete menus[lv1MenuIndex]['type']; 176 menus[lv1MenuIndex]['sub_button'] = new Array(); 177 } 178 }else if(tr.hasClass("lv2Menu")){ 179 var lv1MenuIndex = tr.prevAll(".lv1Menu").length -1; 180 var lv2MenuIndex = tr.prevUntil(".lv1Menu").length; 181 menus[lv1MenuIndex]['sub_button'][lv2MenuIndex][name] = $(this).val(); 182 } 183 render(menus); 184 }); 185 $("#menuForm").on("submit", function(){ 186 console.log(menus); 187 return false; 188 }); 189 }); 190 191 192 //tr渲染 193 function trRender(parentEle, menu, prevEle){ 194 if(!parentEle){ 195 if(!prevEle){ 196 parentEle = $("#lv1Menu_tpl .lv1Menu").clone(true); 197 var tbody = $("#menuForm table tbody"); 198 tbody.append(parentEle); 199 }else { 200 parentEle = $("#lv2Menu_tpl .lv2Menu").clone(true); 201 prevEle.after(parentEle); 202 } 203 } 204 parentEle = $(parentEle); 205 parentEle.find("input[name='name']").val(menu['name']); 206 if(menu['type']){ 207 parentEle.find(".btnAddLv2Menu").hide(); 208 parentEle.find(".btnRemoveMenu").css('margin-left', '108px'); 209 parentEle.find("select[name='type']").val(menu['type']); 210 }else{ 211 parentEle.find(".btnRemoveMenu").css('margin-left', '0'); 212 parentEle.find(".btnAddLv2Menu").show(); 213 } 214 if(menu['key'] != undefined){ 215 parentEle.find("input[name='url']").attr('name', 'key'); 216 parentEle.find("input[name='key']").val(menu['key']).show(); 217 }else if(menu['url'] != undefined){ 218 parentEle.find("input[name='key']").attr('name', 'url'); 219 parentEle.find("input[name='url']").val(menu['url']).show(); 220 }else{ 221 parentEle.find("input[name='key']").hide(); 222 parentEle.find("input[name='url']").hide(); 223 } 224 return parentEle; 225 } 226 //菜单渲染 227 function render(menus){ 228 var parentEle = $("#menuForm"); 229 var lv1Menus = parentEle.find(".lv1Menu"); 230 for(var i=0; i<menus.length; i++){ 231 var lv1Menu = trRender(lv1Menus[i], menus[i], null); 232 if(menus[i]['sub_button'] && menus[i]['sub_button'].length > 0){ 233 var sub_menus = menus[i]['sub_button']; 234 for(var j=0; j<sub_menus.length; j++){ 235 var lv2Menus = lv1Menu.nextUntil(".lv1Menu"); 236 trRender(lv2Menus[j], sub_menus[j], lv2Menus.length>0?lv2Menus.last():lv1Menu); 237 } 238 //tr行数大于记录数时 239 if(lv2Menus.length > menus[i]['sub_button'].length){ 240 for(var j=menus[i]['sub_button'].length; j<lv2Menus.length; j++){ 241 lv2Menus[j].remove(); 242 } 243 } 244 245 }else{ 246 lv1Menu.nextAll(".lv2Menu").remove(); 247 } 248 } 249 250 //tr行数大于记录数时 251 lv1Menus = parentEle.find(".lv1Menu"); 252 if(lv1Menus.length > menus.length){ 253 for(var i=menus.length; i<lv1Menus.length; i++){ 254 var lv2Menus = $(lv1Menus[i]).nextUntil(".lv1Menu"); 255 lv2Menus.remove(); 256 $(lv1Menus[i]).remove(); 257 } 258 } 259 } 260 </script> 261 </body> 262 </html>