zoukankan      html  css  js  c++  java
  • js对table操作(添加删除交换上下TR)

    <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>&nbsp;'+ <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>

  • 相关阅读:
    HDU 2844 Coins(多重背包)
    HDU 4540 威威猫系列故事——打地鼠(DP)
    Codeforces Round #236 (Div. 2)
    FZU 2140 Forever 0.5
    HDU 1171 Big Event in HDU(DP)
    HDU 1160 FatMouse's Speed(DP)
    ZOJ 3490 String Successor
    ZOJ 3609 Modular Inverse
    ZOJ 3603 Draw Something Cheat
    ZOJ 3705 Applications
  • 原文地址:https://www.cnblogs.com/jzssuanfa/p/7242244.html
Copyright © 2011-2022 走看看