js对table操作（增加删除交换上下TR）

来源：互联网发布：jquery–1.4.2.min.js 编辑：程序博客网时间：2024/05/16 19:08

<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;      }    }  }}//添加inputfunction 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>&nbsp;'+<span style="white-space:pre"></span>'</td>');}

//交换上下TRfunction 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);    }}//删除trfunction 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>

0 0