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>

  • 相关阅读:
    Openjudge NOI题库 ch0111/01 查找最近的元素
    Openjudge NOI题库 ch0111/07 和为给定数
    Openjudge NOI题库 ch0111/08 不重复地输出数
    Openjudge NOI题库 ch0111/10 河中跳房子|NOIP2015 day2 stone
    Openjudge NOI题库 ch0111/t1776 木材加工
    SRM 508(2-1000pt)
    SRM 507(2-1000pt)
    SRM 504.5(2-1000pt)
    最小生成树专题总结
    SRM 506(2-1000pt)
  • 原文地址:https://www.cnblogs.com/jzssuanfa/p/7242244.html
Copyright © 2011-2022 走看看