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> '+
<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)的更多相关文章
- js 表格操作----添加删除
		
js 表格操作----添加删除 书名:<input type="text" id="name"> 价格:<input type="t ...
 - table动态添加删除一行和改变标题
		
<style type="text/css"> body{ font-size:13px; line-height:25px; } table{ border-top: ...
 - jQuery08源码 (5140 , 6057) DOM操作 : 添加 删除 获取 包装 DOM筛选
		
jQuery.fn.extend({ //$('ul').find('li').css('background','red'); //$('ul').find( $('li') ).css('back ...
 - js表格上下移动添加删除
		
html部分 <div onclick='fn()'>加</div> <table width="250" border="1" ...
 - OCR/Vote disk 维护操作: (添加/删除/替换/移动) (文档 ID 1674859.1)
		
适用于: Oracle Database - Enterprise Edition - 版本 10.2.0.1 到 11.2.0.1.0 [发行版 10.2 到 11.2]本文档所含信息适用于所有平台 ...
 - jquery对类的操作,添加,删除,点击添加,再点击删除
		
jquery对类的操作,添加(addClass),删除l类(remoceClass),点击添加,再点击删除(toggleClass)
 - table 排序 添加 删除 等操作
		
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
 - Js实现Table动态添加一行的小例子
		
<form id="form1" runat="server"> <div> <table id=" style=&qu ...
 - jquery17 DOM操作 : 添加 删除 获取 包装 DOM筛选
		
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
 
随机推荐
- java之线程池面试题
			
面试官:线程池有哪些?分别的作用是什么? 常用的线程池有: newSingleThreadExecutor newFixedThreadExecutor newCacheThreadExecutor ...
 - bzoj 5055: 膜法师 树状数组+离散
			
先枚举每一个数,看它前面有几个比它小,算一下和为sum1,后面有几个比它大,算一下和为sum2,对答案的贡献为A[i]*sum1*sum2. 离散化后,树状数组就可以了. 就是倒着一边,顺着一边,统计 ...
 - JS return false 与 return true
			
在大多数情况下,为事件处理函数返回false,可以防止默认的事件行为.例如,默认情况下点击一个<a>元素,页面会跳转到该元素href属性指定的页. Return False 就相当于终止符 ...
 - Tarjan  算法  自学整理
			
算法介绍 如果两个顶点可以相互通达,则称两个顶点强连通(strongly connected).如果有向图G的每两个顶点都强连通,称G是一个强连通图.非强连通图有向图的极大强连通子图,称为强连通分量( ...
 - LeetCode OJ--Search in Rotated Sorted Array
			
http://oj.leetcode.com/problems/search-in-rotated-sorted-array/ 转换了一次的有序数组,进行类似二分查找. 从begin到mid和从mid ...
 - Elasticsearch使用syslog发送Watcher告警事件
			
https://blog.csdn.net/mvpboss1004/article/details/70158864?locationNum=9&fps=1
 - Codeforces 665D Simple Subset【构造】
			
题目链接: http://codeforces.com/problemset/problem/665/D 题意: 给定序列,从中找出最大的子集,使得子集中的数两两相加均为质数. 分析: 貌似有用最大团 ...
 - BZOJ3674 可持久化并査集
			
@(BZOJ)[可持久化并査集] Description n个集合 m个操作 操作: 1 a b 合并a,b所在集合 2 k 回到第k次操作之后的状态(查询算作操作) 3 a b 询问a,b是否属于同 ...
 - 10.Java web—JavaBean
			
定义一个类,然后在jsp页面通过<jsp:useBean>标签调用 重点是类属性名要起得规则,一般是setXXX getXXXX 新建一个类UserInfo public class U ...
 - 前端MVC Vue2学习总结(八)——前端路由
			
路由是根据不同的 url 地址展示不同的内容或页面,早期的路由都是后端直接根据 url 来 reload 页面实现的,即后端控制路由. 后来页面越来越复杂,服务器压力越来越大,随着AJAX(异步刷新技 ...