JQuery操作表格（附源码） 实现tr上下移的问题
JQuery操作表格（附源码） 实现tr上下移 jQuery --------------------编程问答--------------------
你是发布呀还是求代码呀 --------------------编程问答-------------------- 我给你一段代码吧
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>--------------------编程问答-------------------- http://hi.baidu.com/xpjames/item/96a4a3d9f26f7b0321e250bb
<%@taglib uri="/struts-tags" prefix="s" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<%@ taglib prefix="s" uri ="/struts-tags" %>
<%
response.setHeader("X-UA-Compatible","IE=EmulateIE8");
%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--框架必需start-->
<script type="text/javascript" src="../js/jquery-1.4.js"></script>
<script type="text/javascript" src="../js/framework.js"></script>
<link href="../css/import_basic.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" id="skin"/>
<!--框架必需end-->
<!--让ie6支持透明png图片start-->
<script type="text/javascript" src="../js/method/pngFix/supersleight.js"></script>
<!--让ie6支持透明png图片end-->
<!--浮动面板start-->
<script type="text/javascript" src="../js/attention/floatPanel.js"></script>
<script type="text/javascript" src="../js/nav/switchable.js"></script>
<script src="../js/menu/contextmenu.js" type="text/javascript"></script>
<script type="text/javascript" src="../js/form/lister.js"></script>
<script type="text/javascript" src="../js/tree/dtree/dtree.js"></script>
<link href="../js/tree/dtree/dtree.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="../js/table/treeTable.js"></script>
<script type="text/javascript" src="../js/form/spinbox.js"></script>
<script type="text/javascript">
function change(){
var oObj = event.srcElement;
if(oObj.tagName.toLowerCase() == "td"){
var oTr = oObj.parentNode;
for(var i =0 ; i < document.all.cpwlxx.rows.length; i++){
document.all.cpwlxx.rows[i].style.backgroundColor = "";
document.all.cpwlxx.rows[i].tag = false;
}
oTr.style.backgroundColor = "#CCCCFF";
oTr.tag = true;
}
}
function out(){
var oObj = event.srcElement;
if(oObj.tagName.toLowerCase() == "td"){
var oTr = oObj.parentNode;
if(!oTr.tag){
oTr.style.backgroundColor = "";
}
}
}
function over(){
var oObj = event.srcElement;
if(oObj.tagNrame.toLowerCase() == "td"){
var oTr = oObj.parentNode;
if(!oTr.tag){
oTr.style.backgroundColor = "#E1E9FD";
}
}
}
function deleteTr(obj){
var tr=document.getElementById(obj);
var table=document.getElementById("cpwlxx");
tr.parentNode.removeChild(tr);
}
//===================================曹传奎 2013年4月20日模版排序功能==============================================================
function xiangshang(obj){
var objTR=$(obj).parent().parent();
var preTR=objTR.prev();
if(preTR.prev().length>0){
preTR.insertAfter(objTR);
}else{
top.Dialog.alert("已是第一个！");
}
}
function xiangxia(obj){
var objTR=$(obj).parent().parent();
var nextTR=objTR.next();
if(nextTR.length>0){
nextTR.insertBefore(objTR);
}else{
top.Dialog.alert("已是最后一个！");
}
}
</script>
</head>
<body oncontextmenu="self.event.returnValue=false">
<div style="height: 480px; overflow: auto;">
<input type="hidden" value="${chanPin.id}" id="chanPinId" />
<table class="tableStyle" id="cpwlxx">
<tr>
<th width="50px;">物料编号</th><th width="100px">物料名称</th><th width="70px;">物料类型</th><th width="50px;">单套数量</th><th>产品说明</th><th>操作</th><th width="50px;">排序</th>
</tr>
<s:iterator value="cpwls" id="cpwl">
<tr id="${cpwl.id.wuLiaoXinXi.id }">
<td>${cpwl.id.wuLiaoXinXi.wuLiaoBianMa }</td>
<td>${cpwl.id.wuLiaoXinXi.mingCheng }</td>
<td>${cpwl.id.wuLiaoXinXi.leiXing }</td>
<td><input type="hidden" value="${cpwl.id.wuLiaoXinXi.id }" name="wuLiaoId"/>
<input name="num" type="text" value="${cpwl.num }" style="width: 40px;"/>
</td>
<td><input name="beizhu" style="width: 50px;" type="text" value="${cpwl.beizhu }"/></td>
<td><input type="button" value="删除" onclick="deleteTr(${cpwl.id.wuLiaoXinXi.id})" /></td>
<td><span class="img_btn_up hand" title="向上移动" onclick="xiangshang(this)"></span><span class="img_btn_down hand" title="向下移动" onclick="xiangxia(this)"></span></td>
</tr>
</s:iterator>
</table>
</div>
</body>
</html>
Etoak_james 为你提供现成的
--------------------编程问答--------------------
<!-- Etoak_james -->
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
function up(){
$.each($("table input:checked"),function(){
var onthis=$(this).parent().parent();
var getUp=onthis.prev();
if ($(getUp).has("input").size()==0)
{
alert("已是最顶层！");
return false;
}
$(onthis).after(getUp);
});
}
//下移
function down(){
var last_checked = $("table input:checked").last();//获取选中checkbox中的最后一个
var last_input=$(last_checked).parent().parent();//获取选中Checkbox中最后一个的tr
var last_next = $(last_input).next();//获取该tr的下一个同胞元素
if($(last_next).has("input").size()!=0){
$.each($("table input:checked"),function(){
var onthis=$(this).parent().parent(); //获取到tr行
var getdown=onthis.next();//得到选中tr的下一行
var next_checkbox = $(getdown).children().children();
while($(next_checkbox).attr("checked")=="checked"){//（这个while循环起到固定移动的作用）如果下一个checkbox是选中的那么继续寻找下一个
getdown = getdown.next();
next_checkbox
}
if($(getdown).has("input").size()==0){
alert("已是最底层！");
return false;
}else{
$(getdown).after(onthis); //替换
}
});
}else{
alert("已是最底层");
return false;
}
}
</script>
</head>
<body>
<div>
<input type="button" onclick="up();" value=" 上移 ">
<input type="button" onclick="down();" value=" 下移 ">
</div>
<div>
<table width="400px" height="200" class="mytable" cellpadding="5" cellspacing="0">
<tr>
<td>序号</td>
<td>名字</td>
<td>性别</td>
</tr>
<tr>
<td><input type="checkbox" id="c1"/>1</td>
<td>james</td>
<td>男</td>
</tr>
<tr>
<td><input type="checkbox" id="c2"/>2</td>
<td>伏兮</td>
<td>女</td>
</tr>
<tr>
<td><input type="checkbox" id="c3"/>3</td>
<td>贝贝</td>
<td>女</td>
</tr>
<tr>
<td><input type="checkbox" id="c3"/>4</td>
<td>爱丽丝</td>
<td>女</td>
</tr>
<tr>
<td><input type="checkbox" id="c3"/>5</td>
<td>卡洛琳</td>
<td>女</td>
</tr>
</table>
</div>
</body>
</html>
补充：Java , Web 开发
