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>

  • 相关阅读:
    Java 第十一届 蓝桥杯 省模拟赛 梅花桩
    Java 第十一届 蓝桥杯 省模拟赛 梅花桩
    Java 第十一届 蓝桥杯 省模拟赛 梅花桩
    Java 第十一届 蓝桥杯 省模拟赛 元音字母辅音字母的数量
    Java 第十一届 蓝桥杯 省模拟赛 元音字母辅音字母的数量
    Java 第十一届 蓝桥杯 省模拟赛 元音字母辅音字母的数量
    Java 第十一届 蓝桥杯 省模拟赛 最大的元素距离
    Java 第十一届 蓝桥杯 省模拟赛 递增序列
    Java 第十一届 蓝桥杯 省模拟赛 递增序列
    Java 第十一届 蓝桥杯 省模拟赛 最大的元素距离
  • 原文地址:https://www.cnblogs.com/jzssuanfa/p/7242244.html
Copyright © 2011-2022 走看看