JQuery实现表格行的下移、上移、删除、增加_Web前端大全_优良自学吧 |
当前位置： >
> JQuery实现表格行的下移、上移、删除、增加优良自学吧提供JQuery实现表格行的下移、上移、删除、增加,JQuery实现表格行的上移、下移、删除、增加 &%@ page language="java" import="java.util.*" pageEncoding="GBK"%& &% String path = request.gJQuery实现表格行的上移、下移、删除、增加
&%@ page language="java" import="java.util.*" pageEncoding="GBK"%&
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
&!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&
&base href="&%=basePath%&"&
&title&My JSP 'index.jsp' starting page&/title&
&meta http-equiv="pragma" content="no-cache"&
&meta http-equiv="cache-control" content="no-cache"&
&meta http-equiv="expires" content="0"&
&meta http-equiv="keywords" content="keyword1,keyword2,keyword3"&
&meta http-equiv="description" content="This is my page"&
&script type="text/javascript" src="/Test/js/jquery.min.js"&&/script&
&script type="text/javascript"&
function del(t){
$(t).parent().parent().remove();
function up(t){
var i=$(t).parent().parent().index();//当前行的id
if(i&1){//不是表头，也不是第一行，则可以上移
var tem0=$(t).parent().parent().html();
var tem1=$(t).parent().parent().prev().html();
$(t).parent().parent().prev().html(tem0);
$(t).parent().parent().html(tem1);
function down(t){
var l=$("#MyTB tr").//总行数
var i=$(t).parent().parent().index();//当前行的id
if(i&l-1){//不是最后一行，则可以下移
var tem0=$(t).parent().parent().html();
var tem1=$(t).parent().parent().next().html();
$(t).parent().parent().next().html(tem0);
$(t).parent().parent().html(tem1);
function add(t){
var tem0=$(t).parent().parent().html();
$(t).parent().parent().append("&tr&"+tem0+"&/tr&");
&table id="MyTB"&
&td&xxxxxxxx&/td&
&td&xxxxxxxx&/td&
&td&xxxxxxxx&/td&
&td&xxxxxxxx&/td&
&input type="button" value="上" onclick="up(this)" /&
&input type="button" value="下" onclick="down(this)" /&
&input type="button" value="删" onclick="del(this)" /&
&input type="button" value="加" onclick="add(this)" /&
&input type="button" value="上" onclick="up(this)" /&
&input type="button" value="下" onclick="down(this)" /&
&input type="button" value="删" onclick="del(this)" /&
&input type="button" value="加" onclick="add(this)" /&
&input type="button" value="上" onclick="up(this)" /&
&input type="button" value="下" onclick="down(this)" /&
&input type="button" value="删" onclick="del(this)" /&
&input type="button" value="加" onclick="add(this)" /&
&input type="button" value="上" onclick="up(this)" /&
&input type="button" value="下" onclick="down(this)" /&
&input type="button" value="删" onclick="del(this)" /&
&input type="button" value="加" onclick="add(this)" /&
&input type="button" value="上" onclick="up(this)" /&
&input type="button" value="下" onclick="down(this)" /&
&input type="button" value="删" onclick="del(this)" /&
&input type="button" value="加" onclick="add(this)" /&
（本文来自互联网，不代表搜站(/)的观点和立场）编辑推荐最近更新jQuery实现table中的tr上下移动并保持序号不变
jQueryMoveTr.html代码如下：
&!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN"&
&TITLE&jQuery-bhang&/TITLE&
& &script type="text/javascript"
src="jquery-1.6.2.js"&&/script&
& &script type="text/javascript"
src="jquery-rlutil-1.6.2.js"&&/script&
&&table id="hide_table_id"
style="display:"&&tr
id="hide_tr_id"&&/tr&&/table&
&&table id="show_table_id"
border="1"&
class="td_num"&1&/td&
&&&&td&aaaaaaaaaa&/td&
&&&&td&@@@@@@@&/td&
align="center"&&input type="button"
name="btn1" value="↑" onclick="moveTr(this);" /&
& &input type="button"
name="btn2" value="↓" onclick="moveTr(this);"
&&&&td&注释1&/td&
class="td_num"&2&/td&
&&&&td&bbbbbbbbbbbbb&/td&
&&&&td&#########&/td&
align="center"&&input type="button"
name="btn1" value="↑" onclick="moveTr(this);" /&
& &input type="button"
name="btn2" value="↓" onclick="moveTr(this);"
&&&&td&注释2&/td&
class="td_num"&3&/td&
&&&&td&cccccccccccc&/td&
&&&&td&$$$$$$$$$$$$&/td&
align="center"&&input type="button"
name="btn1" value="↑" onclick="moveTr(this);" /&
& &input type="button"
name="btn2" value="↓" onclick="moveTr(this);"
&&&&td&注释3&/td&
class="td_num"&4&/td&
&&&&td&ddddddddddddd&/td&
&&&&td&&&&&&&&&&&&&&&/td&
align="center"&&input type="button"
name="btn1" value="↑" onclick="moveTr(this);" /&
& &input type="button"
name="btn2" value="↓" onclick="moveTr(this);"
&&&&td&注释4&/td&
class="td_num"&5&/td&
&&&&td&eeeeeeeeeeeeee&/td&
&&&&td&***************&/td&
align="center"&&input type="button"
name="btn1" value="↑" onclick="moveTr(this);" /&
& &input type="button"
name="btn2" value="↓" onclick="moveTr(this);"
&&&&td&注释5&/td&
jquery-rlutil-1.6.2.js代码如下：
//功能：使带有序号的table表格中的tr内容上下移动并保持序号不变
//函数使用要求：
//1、要求在使用此函数前必须先引用 jquery-1.6.2.js 文件
//2、上移按钮的name属性必须是 btn1，下移按钮的name属性必须是 btn2
//3、要有一个id=hide_table_id并且style="display:"的table元素，这个table元素里面要有一个id=hide_tr_id的tr元素
//4、要有一个id=show_table_id的table元素，这个table元素里面放置n个tr套td的信息，其中有一个td的text是序号
//5、要求所有text内容为序号的td的class属性为 td_num//@param:
obj为一个button的对象function moveTr(obj){
&var btnName = obj.&
//获得按钮的name属性值
&if(btnName ==
"btn1"){&& //发起上移指令
&&prevMoveTrCommand(obj);
&}else if(btnName == "btn2"){&
//发起下移指令
&&nextMoveTrCommand(obj);
//上移指令
function prevMoveTrCommand(obj){
&var $jqFirstTr = jQuery("#show_table_id
tr:first-child");&&
//获得第一个tr的对象
&var firstTrVal =
$jqFirstTr.find(".td_num").text();&&
//获得第一个tr的序号
&var objVal =
jQuery(obj).parent().parent().find(".td_num").text();&
//获得本身tr的序号
&if(objVal == firstTrVal){&
//判断是否在把第一行向上移
&&prevMoveTrOpra(obj);&&
//调用上移操作方法
//上移操作
function prevMoveTrOpra(obj){
&var $jqObj =
jQuery(obj).parent().parent();& //获得本身tr的信息
&var $trOObjt =
jQuery("#hide_tr_id").append($jqObj.html());&
//把本身tr放入临时信息
&var $jqSublObj =
jQuery(obj).parent().parent().prev();&&
//获得上一个tr的信息
&$jqSublObj.find(".td_num").text(Number($jqSublObj.find(".td_num").text())+1);&&&
//把上一个tr序号加1
&$jqObj.html("").append($jqSublObj.html());&&
//把本身tr清空并插入上一个信息
&$trOObjt.find(".td_num").text(Number($trOObjt.find(".td_num").text())-1);&&&
//把本身tr序号减1
&$jqSublObj.html("").append($trOObjt.html());&&
//把上一个tr清空并插入临时保存的tr信息
&jQuery("#hide_tr_id").html("");&&
//清空临时tr信息
//下移指令
function nextMoveTrCommand(obj){
&var $jqLastTr = jQuery("#show_table_id
tr:last-child");&&
//获得最后一个tr的对象
&var lastTrVal =
$jqLastTr.find(".td_num").text();&&
//获得最后一个tr的序号
&var objVal =
jQuery(obj).parent().parent().find(".td_num").text();&
//获得本身tr的序号
&if(objVal == lastTrVal){&
//判断是否想把最后一行往下移
&&nextMoveTrOpra(obj);&&&
//调用下移操作方法
//下移操作
function nextMoveTrOpra(obj){
&var $jqObj =
jQuery(obj).parent().parent();& //获得本身tr的信息
&var $trOObjt =
jQuery("#hide_tr_id").append($jqObj.html());&
//把本身tr放入临时信息
&var $jqSiblObj =
jQuery(obj).parent().parent().next();&&
//获得下一个tr的信息
&$jqSiblObj.find(".td_num").text(Number($jqSiblObj.find(".td_num").text())-1);&&&
//把下一个tr序号减1
&$jqObj.html("").append($jqSiblObj.html());&&
//把本身tr清空并插入下一个tr信息
&$trOObjt.find(".td_num").text(Number($trOObjt.find(".td_num").text())+1);&&&
//把本身tr序号加1
&$jqSiblObj.html("").append($trOObjt.html());&&
//把下一个tr清空并插入临时保存的tr信息
&jQuery("#hide_tr_id").html("");&&&
//清空临时tr信息
--------------------------------------------------------------------------------------------------jQueryMoveTr.html代码如下：
&table id="show_table_id3"
border="1"&
class="td_num3"&&input type="text"
name="td_num2_tn" readonly="true" style="border:0 width:10"
&&&&td&aaaaaaaaaa&/td&
&&&&td&@@@@@@@&/td&
align="center"&&input type="button"
name="btn1" value="↑" onclick="prevMoveTrCommand3(this,
'show_table_id3', 'td_num3');" /&
& &input type="button"
name="btn2" value="↓" onclick="nextMoveTrCommand3(this,
'show_table_id3', 'td_num3');"
&&&&td&注释1&/td&
class="td_num3"&&input type="text"
name="td_num2_tn" readonly="true" style="border:0 width:10"
&&&&td&bbbbbbbbbbbbb&/td&
&&&&td&#########&/td&
align="center"&&input type="button"
name="btn1" value="↑" onclick="prevMoveTrCommand3(this,
'show_table_id3', 'td_num3');" /&
& &input type="button"
name="btn2" value="↓" onclick="nextMoveTrCommand3(this,
'show_table_id3', 'td_num3');"
&&&&td&注释2&/td&
class="td_num3"&&input type="text"
name="td_num2_tn" readonly="true" style="border:0 width:10"
&&&&td&cccccccccccc&/td&
&&&&td&$$$$$$$$$$$$&/td&
align="center"&&input type="button"
name="btn1" value="↑" onclick="prevMoveTrCommand3(this,
'show_table_id3', 'td_num3');" /&
& &input type="button"
name="btn2" value="↓" onclick="nextMoveTrCommand3(this,
'show_table_id3', 'td_num3');"
&&&&td&注释3&/td&
class="td_num3"&&input type="text"
name="td_num2_tn" readonly="true" style="border:0 width:10"
&&&&td&ddddddddddddd&/td&
&&&&td&&&&&&&&&&&&&&&/td&
align="center"&&input type="button"
name="btn1" value="↑" onclick="prevMoveTrCommand3(this,
'show_table_id3', 'td_num3');" /&
& &input type="button"
name="btn2" value="↓" onclick="nextMoveTrCommand3(this,
'show_table_id3', 'td_num3');"
&&&&td&注释4&/td&
class="td_num3"&&input type="text"
name="td_num2_tn" readonly="true" style="border:0 width:10"
&&&&td&eeeeeeeeeeeeee&/td&
&&&&td&***************&/td&
align="center"&&input type="button"
name="btn1" value="↑" onclick="prevMoveTrCommand3(this,
'show_table_id3', 'td_num3');" /&
& &input type="button"
name="btn2" value="↓" onclick="nextMoveTrCommand3(this,
'show_table_id3', 'td_num3');"
&&&&td&注释5&/td&
jquery-rlutil-1.6.2.js代码如下：
//功能：使带有序号的table表格中的tr内容上下移动并保持序号不变
//函数使用要求：
//1、要求在使用此函数前必须先引用 jquery-1.6.2.js 文件
//2、上移按钮的name属性必须是 btn1，下移按钮的name属性必须是 btn2
//3、要有一个id=show_table_id的table元素，这个table元素里面放置n个tr套td的信息，其中有一个td的text
是input框，input的value是序号值
//4、要求所有text内容为序号的td的class属性为 td_num
//&@param: obj为一个button的对象
//&@param: table_self_id为table的id值
//&@param:
td_self_id为内容是input序号框的td的class的属性值
//上移指令3
function prevMoveTrCommand3(obj, table_self_id,
td_self_id){
&var $jqFirstTr = jQuery("#"+table_self_id+"
tr:first-child");&&
//获得第一个tr的对象
&var firstTrVal = $jqFirstTr.find("."+td_self_id+"
input:nth-child(1)").val();&&
//获得第一个tr里的input的value的序号
&var objVal =
jQuery(obj).parent().parent().find("."+td_self_id+"
input:nth-child(1)").val();& //获得本身tr的序号
&if(objVal == firstTrVal){&
//判断是否在把第一行向上移
&&prevMoveTrOpra3(obj,
td_self_id);&& //调用上移操作方法
//上移操作3
function prevMoveTrOpra3(obj, td_self_id){
&var $jqObj =
jQuery(obj).parent().parent().clone();&
//获得并复制本身tr的信息
&var $jqSublObj =
jQuery(obj).parent().parent().prev();&&
//获得上一个tr的信息
&$jqSublObj.find("."+td_self_id+"
input:nth-child(1)").val(Number($jqSublObj.find("."+td_self_id+"
input:nth-child(1)").val())+1);&&&
//把上一个tr序号加1
&jQuery(obj).parent().parent().html("").append($jqSublObj.html());&&
//把本身tr清空并插入上一个信息
&$jqObj.find("."+td_self_id+"
input:nth-child(1)").val(Number($jqObj.find("."+td_self_id+"
input:nth-child(1)").val())-1);&&&
//把本身tr序号减1
&$jqSublObj.html("").append($jqObj.html());&&
//把上一个tr清空并插入临时保存的tr信息
&$jqObj.remove();&&
//删除复制的多余jQuery对象
//下移指令3
function nextMoveTrCommand3(obj, table_self_id, td_self_id){
&var $jqLastTr = jQuery("#"+table_self_id+"
tr:last-child");&&
//获得最后一个tr的对象
&var lastTrVal = $jqLastTr.find("."+td_self_id+"
input:nth-child(1)").val();&&
//获得最后一个tr的序号
&var objVal =
jQuery(obj).parent().parent().find("."+td_self_id+"
input:nth-child(1)").val();& //获得本身tr的序号
&if(objVal == lastTrVal){&
//判断是否想把最后一行往下移
&&nextMoveTrOpra3(obj,
td_self_id);&&&
//调用下移操作方法
//下移操作3
function nextMoveTrOpra3(obj, td_self_id){
&var $jqObj =
jQuery(obj).parent().parent().clone();&
//获得并复制本身tr的信息
&var $jqSiblObj =
jQuery(obj).parent().parent().next();&&
//获得下一个tr的信息
&$jqSiblObj.find("."+td_self_id+"
input:nth-child(1)").val(Number($jqSiblObj.find("."+td_self_id+"
input:nth-child(1)").val())-1);&&&
//把下一个tr序号减1
&jQuery(obj).parent().parent().html("").append($jqSiblObj.html());&&
//把本身tr清空并插入下一个tr信息
&$jqObj.find("."+td_self_id+"
input:nth-child(1)").val(Number($jqObj.find("."+td_self_id+"
input:nth-child(1)").val())+1);&&&
//把本身tr序号加1
&$jqSiblObj.html("").append($jqObj.html());&&
//把下一个tr清空并插入临时保存的tr信息
&$jqObj.remove();&&&
//删除复制的多余jQuery对象
(我iteye的博客)
源代码在网易: shihuan830619的网盘里的J2EE代码里。
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。jquery js列表中上移,下移,确定怎么写_百度知道
jquery js列表中上移,下移,确定怎么写
我有更好的答案
按默认排序
你的意思是两个div有不同的一组数据，吧div1的数据移到div2里面去？如果是这样，就用左边的div1删除当前数据，右边的div2添加这笔数据。
thisObj.after(thisObj.prev());
其他类似问题
jquery的相关知识
您可能关注的推广回答者：
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁登录系统:用户名:
如果要讨论问题，请先注册。
[备忘]jquery动态调整表格行的顺序，上移，下移~~
上一篇:下一篇:
添加日期： 21:12:56
愁了半天怎么实现，结果一搜，人家写的真简单。<table&id="table1"&style="background-color:&Lime"&class="displayTable">&&&&&&<caption>Table&1</caption>&&&&&&<thead>&&&&&&&&&&<tr>&&&&&&&&&&&&&&<th>One</th>&&&&&&&&&&&&&&<th>Two</th>&&&&&&&&&&&&&&<th>Three</th>&&&&&&&&&&</tr>&&&&&&</thead>&&&&&&<tbody>&&&&&&&&&&<tr&id="row1">&&&&&&&&&&&&&&<td>R1&C1</td>&&&&&&&&&&&&&&<td>R1&C2</td>&&&&&&&&&&&&&&<td>&&&&&&&&&&&&&&&&&&<a&href="#"&id="row1Link"&class="rowLink">Move&Me</a>&|&&&&&&&&&&&&&&&&&&<a&href="#"&id="row1Up"&class="rowUp">Up</a>&|&&&&&&&&&&&&&&&&&&&<a&href="#"&id="row1Down"&class="rowDown">Down</a>&&&&&&&&&&&&&&</td>&&&&&&&&&&</tr>&&&&&&&&&&<tr&id="row2">&&&&&&&&&&&&&&<td>R2&C1</td>&&&&&&&&&&&&&&<td>R2&C2</td>&&&&&&&&&&&&&&<td>&&&&&&&&&&&&&&&&&&<a&href="#"&id="row2Link"&class="rowLink">Move&Me</a>&|&&&&&&&&&&&&&&&&&&<a&href="#"&id="row2Up"&class="rowUp">Up</a>&|&&&&&&&&&&&&&&&&&&&<a&href="#"&id="row2Down"&class="rowDown">Down</a>&&&&&&&&&&&&&&</td>&&&&&&&&&&</tr>&&&&&&&&&&<tr&id="row3">&&&&&&&&&&&&&&<td>R3&C1</td>&&&&&&&&&&&&&&<td>R3&C2</td>&&&&&&&&&&&&&&<td>&&&&&&&&&&&&&&&&&&<a&href="#"&id="row3Link"&class="rowLink">Move&Me</a>&|&&&&&&&&&&&&&&&&&&<a&href="#"&id="row3Up"&class="rowUp">Up</a>&|&&&&&&&&&&&&&&&&&&&<a&href="#"&id="row3Down"&class="rowDown">Down</a>&&&&&&&&&&&&&&</td>&&&&&&&&&&</tr>&&&&&&</tbody>&&</table><script>&&&&&&&&//&Setup&the&"Up"&links&&&&$(".rowUp").click(function&()&{&&&&&&&&var&row&=&$(this).closest("tr");&&&&&&&&&&&&&//&Get&the&previous&element&in&the&DOM&&&&&&&&var&previous&=&row.prev();&&&&&&&&&&&&&//&Check&to&see&if&it&is&a&row&&&&&&&&if&(previous.is("tr"))&{&&&&&&&&&&&&//&Move&row&above&previous&&&&&&&&&&&&row.detach();&&&&&&&&&&&&previous.before(row);&&&&&&&&&&&&&&&&&//&draw&the&user's&attention&to&it&&&&&&&&&&&&row.fadeOut();&&&&&&&&&&&&row.fadeIn();&&&&&&&&}&&&&&&&&//&else&-&already&at&the&top&&&&});&&&&&&&&//&Setup&the&"Down"&links&&&&$(".rowDown").click(function&()&{&&&&&&&&var&row&=&$(this).closest("tr");&&&&&&&&&&&&&//&Get&the&next&element&in&the&DOM&&&&&&&&var&previous&=&row.next();&&&&&&&&&&&&&//&Check&to&see&if&it&is&a&row&&&&&&&&if&(previous.is("tr"))&{&&&&&&&&&&&&//&Move&row&after&next&&&&&&&&&&&&row.detach();&&&&&&&&&&&&previous.after(row);&&&&&&&&&&&&&&&&&//&draw&the&user's&attention&to&it&&&&&&&&&&&&row.fadeOut();&&&&&&&&&&&&row.fadeIn();&&&&&&&&}&&&&&&&&//&else&-&already&at&the&top&&&&});</script>===========================================另一个版本：<table>&&&&<tr>&&&&&&&&<td>One</td>&&&&&&&&<td>&&&&&&&&&&&&<a&href="#"&class="up">Up</a>&&&&&&&&&&&&<a&href="#"&class="down">Down</a>&&&&&&&&&&&&<a&href="#"&class="top">Top</a>&&&&&&&&&&&&<a&href="#"&class="bottom">Bottom</a>&&&&&&&&</td>&&&&</tr>&&&&<tr>&&&&&&&&<td>Two</td>&&&&&&&&<td>&&&&&&&&&&&&<a&href="#"&class="up">Up</a>&&&&&&&&&&&&<a&href="#"&class="down">Down</a>&&&&&&&&&&&&<a&href="#"&class="top">Top</a>&&&&&&&&&&&&<a&href="#"&class="bottom">Bottom</a>&&&&&&&&</td>&&&&</tr>&&&&<tr>&&&&&&&&<td>Three</td>&&&&&&&&<td>&&&&&&&&&&&&<a&href="#"&class="up">Up</a>&&&&&&&&&&&&<a&href="#"&class="down">Down</a>&&&&&&&&&&&&<a&href="#"&class="top">Top</a>&&&&&&&&&&&&<a&href="#"&class="bottom">Bottom</a>&&&&&&&&</td>&&&&</tr>&&&&<tr>&&&&&&&&<td>Four</td>&&&&&&&&<td>&&&&&&&&&&&&<a&href="#"&class="up">Up</a>&&&&&&&&&&&&<a&href="#"&class="down">Down</a>&&&&&&&&&&&&<a&href="#"&class="top">Top</a>&&&&&&&&&&&&<a&href="#"&class="bottom">Bottom</a>&&&&&&&&</td>&&&&</tr>&&&&<tr>&&&&&&&&<td>Five</td>&&&&&&&&<td>&&&&&&&&&&&&<a&href="#"&class="up">Up</a>&&&&&&&&&&&&<a&href="#"&class="down">Down</a>&&&&&&&&&&&&<a&href="#"&class="top">Top</a>&&&&&&&&&&&&<a&href="#"&class="bottom">Bottom</a>&&&&&&&&</td>&&&&</tr></table><script>$(document).ready(function(){&&&&$(".up,.down,.top,.bottom").click(function(){&&&&&&&&var&row&=&$(this).parents("tr:first");&&&&&&&&if&($(this).is(".up"))&{&&&&&&&&&&&&row.insertBefore(row.prev());&&&&&&&&}&else&if&($(this).is(".down"))&{&&&&&&&&&&&&row.insertAfter(row.next());&&&&&&&&}&else&if&($(this).is(".top"))&{&&&&&&&&&&&&row.insertBefore($("table&tr:first"));&&&&&&&&}else&{&&&&&&&&&&&&row.insertAfter($("table&tr:last"));&&&&&&&&}&&&&});});</script>================================================<table><tbody><tr&class="MoveableRow"><td>Data&1</td><td><span&class="down_button">down</span><span&class="up_button">up</span></td></tr><tr></tr><tr&class="MoveableRow"><td>Data&2</td><td><span&class="down_button">down</span><span&class="up_button">up</span></td></tr><tr></tr></tbody></table><script>$('.down_button').live('click',&function&()&{&&&&var&rowToMove&=&$(this).parents('tr.MoveableRow:first');&&&&var&next&=&rowToMove.next('tr.MoveableRow')&&&&if&(next.length&==&1)&{&next.after(rowToMove);&}});&$('.up_button').live('click',&function&()&{&&&&var&rowToMove&=&$(this).parents('tr.MoveableRow:first');&&&&var&prev&=&rowToMove.prev('tr.MoveableRow')&&&&if&(prev.length&==&1)&{&prev.before(rowToMove);&}});</script>
评论 COMMENTS
没有评论 No Comments.
CopyRight & 心缘地方 . All Rights Reserved