js對table操作（增加刪除交換上下TR），tabletr

js對table操作（增加刪除交換上下TR），tabletr

<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>

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。