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>

时间: 2024-12-29 11:47:47

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

js+jquery动态设置/增加/删除/获取元素属性的两种方法集锦对比(动态onclick属性设置+动态title设置)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html140/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>

5月16日上课笔记-js中DOM操作

一.DOM操作 DOM节点的操作 增加 删除 修改 节点的信息: nodeName 获取节点的标签名 parentNode 获取父节点 childNodes IE忽略回车换行,chrome回车换行是文本节点 nodeType 节点类型: 1:元素节点 3:文本节点 9:document节点 2:属性节点 firstChild(支持IE浏览器) || firstElementChild(支持谷歌浏览器) //获取第一个子节点 var fc = ulDom.firstElementChild ||

MySQL DROP TABLE操作以及 DROP 大表时的注意事项

语法: 删表 DROP TABLE Syntax DROP [TEMPORARY] TABLE [IF EXISTS] tbl_name [, tbl_name] ... [RESTRICT | CASCADE] 可一次删除一张或多张表.需具有所删除表上的DROP权限. 表定义文件和数据文件均被移除.表被删除后表上的用户权限不会被自己主动删除. 參数里表中指定的表名不存在则报错,但对于存在的表仍会删除.可通过指定IF EXISTS阻止表不存在时引发的错误(此时对于不存在的表仅产生一个NOTE).

js动态控制table的tr,td增加及删除

html: <table id='wifi_clients_table'   class="table table-striped table-bordered table-hover table-condensed">                 <thead>                  <tr class="success">                    <th>序号</th>  

js创建table / 删除一行tr

代码: <!DOCTYPE html><html><head> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> </head><body> </body> <script type="text/javascript"

js实现动态操作table

 本章案例为通过js,动态操作table,实现在单页面进行增删改查的操作. 简要案例如下: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%&

Mysql字段操作—增加字段、删除字段、修改字段名、修改字段类型(约束条件) 【转】

1.增加字段:    alter table   tablename    add   new_field_id   type   not null default '0';     例:     alter table mmanapp_mmanmedia add appid_id integer not null default 372; 增加主键: alter table  tabelname   add   new_field_id   type    default 0 not null

JS封装cookie操作函数实例(设置、读取、删除)

本文实例讲述了JS封装cookie操作函数.分享给大家供大家参考,具体如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 /*设置cookie*/ function setCookie(name, value, iDay) {   var oDate=new Date();   oDate.setDate(oDate.getDate()+iDay);   document.cook

JS动态增加删除UL节点LI

JS如何动态增加删除UL节点LI及相关内容. <ul id="ul"> <li id=1>11111111111111111<a href="javascript:del(1);">del</a></li> <li id=2 >22222222222222222<a href="javascript:del(2);">del</a></li>