jquery实现鼠标拖拉表格tr上下移动

创建index.jsp页面，引入jquery相应的css，js

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><table border="0" cellpadding="2" cellspacing="0"> <tbody id="move_table"> <tr><td>第一行</td><td><a href="#" onclick="up(this)">上移</a><a href="#" onclick="down(this)">下移</a></td></tr> <tr><td>第二行</td><td><a href="#" onclick="up(this)">上移</a><a href="#" onclick="down(this)">下移</a></td></tr> <tr><td>第三行</td><td><a href="#" onclick="up(this)">上移</a><a href="#" onclick="down(this)">下移</a></td></tr> </tbody></table>//引入jquery<link rel="stylesheet" href="/jquery-ui-custom.css" /><script src="/jquery-ui.min.js"></script><script src="/jquery.js"></script><script type="text/javascript" > function up(obj) {//鼠标点击向上移动 var objParentTR = $(obj).parent().parent(); var prevTR = objParentTR.prev(); if (prevTR.length > 0) { prevTR.insertAfter(objParentTR); } } function down(obj) {//鼠标点击向下移动 var objParentTR = $(obj).parent().parent(); var nextTR = objParentTR.next(); if (nextTR.length > 0) { nextTR.insertBefore(objParentTR); } } //鼠标拖拉tr上下移动 $(document).ready(function(){ $("#move_table").sortable({ cursor: "move", items: "tr",//只是tr可以拖动 opacity: 1.0,//拖动时，透明度为0.6 revert: true,//释放时，增加动画 start: function(event, ui) {//开始移动 var str = event.srcElement.innerHTML;//鼠标点击移动时获取的html内容 //alert(event.find("tr").attr('id'));//第几行 }, update: function(event, ui) {//移动之后更新排序之后 var str = event.srcElement.innerHTML; }); $("#move_table").disableSelection(); });</script>

liu137756

关注