<table width="100%" border="0" cellpadding="2" cellspacing="1" class="table_bg space_top" id="gallery-table"> <tr> <td width="3%" nowrap align=center class="table_title">父菜单名称</td> <td align="center" class="table_title">子菜单</td> <td align="center" class="table_title">类型</td> <td align="center" class="table_title">菜单项值</td> <td align="center" class="table_title">操作</td> </tr> <tr class="1"> <td width="3%" nowrap="" align="center" class="table_title">》</td> <td align="center" class="table_title"> <input type="text" onblur="if(this.value=='') this.value='请输入子菜单项' ;" onclick="if(this.value=='请输入子菜单项') this.value='' ;" value=""></td> <td align="center" class="table_title"> <select> <option value="view">url</option> <option value="click">请求后台</option> </select></td> <td align="center" class="table_title"> <input type="text" onblur="if(this.value=='')this.value='请输入子菜单项值';" onclick="if(this.value=='请输入子菜单项值')this.value='';" value=""></td> <td align="center" class="table_title"> <a href="javascript:;" onclick="removeImg(this)" style="margin-left: 20px; font-size:14px;">[删除子菜单]</a> /<a href="javascript:;" onclick="up(this)" style="margin-left: 20px; font-size:14px;">[up]</a> </td> </tr>
<script type="text/javascript"> var Browser = new Object(); Browser.isIE = window.ActiveXObject ?true : false; //获取行数 function rowindex(tr) { if (Browser.isIE) { return tr.rowIndex; } else { table = tr.parentNode.parentNode; for (i = 0; i < table.rows.length; i ++ ) { if (table.rows[i] == tr) { return i; } } } } //加入input function addImg(obj) { var src = obj.parentNode.parentNode; src.cells[2].innerHTML=''; src.cells[3].innerHTML=''; var index = src.id; if($("."+index+"").size()>=5){ <span style="white-space:pre"> </span> alert("子菜单最多仅仅能5个。") <span style="white-space:pre"> </span> return ; <span style="white-space:pre"> </span> } var idx = rowindex(src); var tbl = document.getElementById('gallery-table'); var row = tbl.insertRow(idx + 1); // row.innerHTML=src.innerHTML.replace(/(.*)(addImg)(.*)(\[)(继续加入)/i, "$1removeImg$3$4删除"); <span style="white-space:pre"> </span> row.className=index; <span style="white-space:pre"> </span> $(row).html('<td width="3%" nowrap align=center class="table_title">》</td>'+ <span style="white-space:pre"> </span>'<td align="center" class="table_title"><input type="text" onBlur="if(this.value=="")this.value="请输入子菜单项";" onclick="if(this.value=="请输入子菜单项")this.value="";" value="请输入子菜单项"/></td>'+ <span style="white-space:pre"> </span>'<td align="center" class="table_title">'+ <span style="white-space:pre"> </span>'<select >'+ <span style="white-space:pre"> </span>'<option value="view">url</option>'+ <span style="white-space:pre"> </span>'<option value="click">请求后台</option>'+ <span style="white-space:pre"> </span>' </select>'+ <span style="white-space:pre"> </span>'</td>'+ <span style="white-space:pre"> </span>'<td align="center" class="table_title"><input type="text" onBlur="if(this.value=="")this.value="请输入子菜单项值";" onclick="if(this.value=="请输入子菜单项值")this.value="";" value="请输入子菜单项值"/></td>'+ <span style="white-space:pre"> </span>'<td align="center" class="table_title"> <a href="javascript:;" onClick="removeImg(this)" style="margin-left: 20px; font-size:14px;">[删除子菜单]</a> '+ <span style="white-space:pre"> </span>'/<a href="javascript:;" onclick="up(this)" style="margin-left: 20px; font-size:14px;">[up]</a> '+ <span style="white-space:pre"> </span>'</td>'); }
//交换上下TR function up(obj){ <span style="white-space:pre"> </span>var table = document.getElementById("gallery-table"); var selectedTr =obj.parentNode.parentNode; var preTr = selectedTr.previousElementSibling; if (preTr && preTr.id == "") { var selectedIndex = selectedTr.innerHTML; selectedTr.innerHTML = preTr.innerHTML; preTr.innerHTML = selectedIndex; table.insertBefore(selectedTr, preTr); } } //删除tr function removeImg(obj) { <span style="white-space:pre"> </span>var index = obj.parentNode.parentNode.className; var row = rowindex(obj.parentNode.parentNode); var tbl = document.getElementById('gallery-table'); tbl.deleteRow(row); if($("."+index).size()==0){ <span style="white-space:pre"> </span>$("#"+index+" td:eq(2)").html('<select name="type"><option value="view">url</option><option value="click">发送消息</option></select>'); <span style="white-space:pre"> </span>$("#"+index+" td:eq(3)").html('<input type="text" name="url" onBlur="if(this.value=="")this.value="请输入菜单项值";" onclick="if(this.value=="请输入菜单项值")this.value="";" value="请输入菜单项值"/>'); } }
<script>