WEB前端开发群：17784629
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>人生旅途</title> <style type="text/css"> *{ font-size:12px; text-decoration:none;} </style> </head> <body> <table id="MenuTable" width="300" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td>风禽系列</td> <td><select id="menu_0"></select> <input type="text" id="num_0" style="width:50px;" /> 份</td> <td><a href="#" onclick="ClickAddMenu();">+</a></td> </tr> <tr id="Contact"> <td>联系人</td> <td><input type="text" style="width:200px;" /></td> <td> </td> </tr> </tbody> </table> <script type="text/javascript"> var order = 1; var k = 1; var MenuTable = document.getElementById("MenuTable").getElementsByTagName("tbody")[0]; var DefaultTr = document.getElementById("Contact"); var menu_0 = document.getElementById("menu_0"); var menus = ["卤水鸭","卤水鸡","卤水鹅","卤水鸭","卤水鸡","卤水鹅"]; function iniMenu(obj){ for(var i=0;i<menus.length;i++){ obj.options.add(new Option(menus[i],i)); } } function closeTr(obj){ //debugger; MenuTable.removeChild(obj); k--; } iniMenu(menu_0); function ClickAddMenu(){ //debugger; if(k < menus.length){ var newTr = document.createElement("tr"); var newTd_0 = document.createElement("td"); newTd_0.innerHTML = "风禽系列"; var newTd_1 = document.createElement("td"); newTd_1.innerHTML = "<select id='menu_"+order+"'></select> <input type='text' id='num_"+order+"' style='width:50px;' /> 份"; var newTd_2 = document.createElement("td"); newTd_2.innerHTML = "<a href='#' onclick='closeTr(this.parentNode.parentNode)'>-</a>"; newTr.appendChild(newTd_0) newTr.appendChild(newTd_1) newTr.appendChild(newTd_2) MenuTable.insertBefore(newTr,DefaultTr); iniMenu(document.getElementById("menu_"+order)); order++; k++; }else{ alert("您不需要再增加菜单类别了！"); } } </script> </body> </html>
提示：你可以先修改部分代码再运行。
Posted in 前端特效.
Tagged with 增减, 点击, 选项.
No comments
By yflintao – 2010年07月27日
Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.
留下评论 Cancel Some HTML is OK
Name (required)
Email (required, but never shared)
Web
or, reply to this post via trackback.
0 Responses
Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.