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

js对table操作(添加删除交换上下TR)的更多相关文章

  1. js 表格操作----添加删除

    js 表格操作----添加删除 书名:<input type="text" id="name"> 价格:<input type="t ...

  2. table动态添加删除一行和改变标题

    <style type="text/css"> body{ font-size:13px; line-height:25px; } table{ border-top: ...

  3. jQuery08源码 (5140 , 6057) DOM操作 : 添加 删除 获取 包装 DOM筛选

    jQuery.fn.extend({ //$('ul').find('li').css('background','red'); //$('ul').find( $('li') ).css('back ...

  4. js表格上下移动添加删除

    html部分 <div onclick='fn()'>加</div> <table width="250" border="1" ...

  5. OCR/Vote disk 维护操作: (添加/删除/替换/移动) (文档 ID 1674859.1)

    适用于: Oracle Database - Enterprise Edition - 版本 10.2.0.1 到 11.2.0.1.0 [发行版 10.2 到 11.2]本文档所含信息适用于所有平台 ...

  6. jquery对类的操作,添加,删除,点击添加,再点击删除

    jquery对类的操作,添加(addClass),删除l类(remoceClass),点击添加,再点击删除(toggleClass)

  7. table 排序 添加 删除 等操作

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. Js实现Table动态添加一行的小例子

    <form id="form1" runat="server"> <div> <table id=" style=&qu ...

  9. jquery17 DOM操作 : 添加 删除 获取 包装 DOM筛选

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

随机推荐

  1. iOS学习笔记17-FMDB

    上一节我已经介绍了SQLite的简单使用,不了解的可以提前去看一下iOS学习笔记16-数据库SQLite,这节我们来讲下FMDB. 一.FMDB介绍 FMDB是一种第三方的开源库,FMDB就是对SQL ...

  2. [UOJ#128][BZOJ4196][Noi2015]软件包管理器

    [UOJ#128][BZOJ4196][Noi2015]软件包管理器 试题描述 Linux用户和OSX用户一定对软件包管理器不会陌生.通过软件包管理器,你可以通过一行命令安装某一个软件包,然后软件包管 ...

  3. [BZOJ1579] [Usaco2009 Feb]Revamping Trails 道路升级(分层图最短路 + 堆优化dijk)

    传送门 dis[i][j]表示第i个点,更新了j次的最短路 此题不良心,卡spfa #include <queue> #include <cstdio> #include &l ...

  4. Tomcat 调优技巧

    Tomcat 调优技巧:1.Tomcat自身调优: ①采用动静分离节约Tomcat的性能: ②调整Tomcat的线程池: ③调整Tomcat的连接器: ④修改Tomcat的运行模式: ⑤禁用AJP连接 ...

  5. 基于注解的 Spring MVC(上)

    什么是Spring MVC Spring MVC框架是一个MVC框架,通过实现Model-View-Controller模式来很好地将数据.业务与展现进行分离.从这样一个角度来说,Spring MVC ...

  6. 【bzoj3545】[ONTAK2010]Peaks 线段树合并

    [bzoj3545][ONTAK2010]Peaks 2014年8月26日3,1512 Description 在Bytemountains有N座山峰,每座山峰有他的高度h_i.有些山峰之间有双向道路 ...

  7. LA 4728 旋转卡壳算法求凸包的最大直径

    #include<iostream> #include<cstdio> #include<cmath> #include<vector> #includ ...

  8. EC++学习笔记(二) 构造/析构/赋值

    条款05:了解c++默默编写并调用了哪些函数 编译器可以暗自为 class 创建default构造函数,copy构造函数,copy assignment操作和析构函数所有这些函数都是 public 并 ...

  9. python在webservice接口测试中的应用

    接口测试第二波,webservice接口来咯,欢迎各位小伙伴吐槽~本次拿免费的互联网国内手机号码归属地查询WEB服务webservice接口做例子,当然有很多免费webservice接口可以供大家使用 ...

  10. spark与Scala安装过程和步骤及sparkshell命令的使用

    Spark与Scala版本兼容问题: Spark运行在Java 8 +,Python 2.7 + / 3.4 +和R 3.1+上.对于Scala API,Spark 2.4.2使用Scala 2.12 ...