js实现上移下移效果

来源：互联网发布：pdf.js 跨域访问文件编辑：程序博客网时间：2024/06/06 13:07

1.前台jsp页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script src="jquery.1.3.2.min.js"></script>
<title>无标题文档</title>
</head>

<body>
<form action="#" name="order" method="post">
<table border="1" id="tabid">
<tr>
<th>姓名</th><th>年龄</th><th>班级</th><th>操作</th>
</tr>

<tr>
<td>孙红波</td><td>22</td><td>1班</td><td><input type="button" value="上移" onclick="up(this)"><input type="button" value="下移" onclick="down(this)"></td>
</tr>

<tr>
<td>胡俊</td><td>23</td><td>2班</td><td><input type="button" value="上移" onclick="up(this)"><input type="button" value="下移" onclick="down(this)"></td>
</tr>

<tr>
<td>程阳</td><td>24</td><td>3班</td><td><input type="button" value="上移" onclick="up(this)"><input type="button" value="下移" onclick="down(this)"></td>
</tr>
</table>
</form>
</body>
</html>
<script language="javascript">
var tab = document.getElementById('tabid');//得到tab对象
function findIndex(e){
//e 即传递过来的按钮对象，它的父节点是td，父节点的父节点是tr
var tr = e.parentNode.parentNode;//得到当前行这个对象
var trs = tab.rows;//得到这个tab中所有行
for(i=0;i<trs.length;i++){
if(tr==trs[i]){
return i;
}
}
return -1;
}

function swap(index1,index2){
//var fc = tab.rows[index1].cells[0].childNodes[1].value;//第一列id
var fn = tab.rows[index1].cells[0].firstChild.nodeValue;//第一列姓名，firstChild也可以改成childNodes[0],DOM中没有secondChild属性，如果一个td中还有第二个元素，只能用childNodes[1]来取值，nodeValue指的是节点的值，value指的是元素节点中的value属性...

var fa = tab.rows[index1].cells[1].firstChild.nodeValue;//第二列年龄
var fc = tab.rows[index1].cells[2].firstChild.nodeValue;//第三列班级
//如果是图片的话就要获取src地址：var fi = tab.rows[index1].cells[2].firstChild.src;//图标
//tab.rows[index1].cells[0].childNodes[1].value=tab.rows[index2].cells[0].childNodes[1].value;
tab.rows[index1].cells[0].firstChild.nodeValue=tab.rows[index2].cells[0].firstChild.nodeValue;
tab.rows[index1].cells[1].firstChild.nodeValue=tab.rows[index2].cells[1].firstChild.nodeValue;
tab.rows[index1].cells[2].firstChild.nodeValue=tab.rows[index2].cells[2].firstChild.nodeValue;
//tab.rows[index1].cells[2].firstChild.src=tab.rows[index2].cells[2].firstChild.src;

//tab.rows[index2].cells[0].childNodes[1].value=fc;
tab.rows[index2].cells[0].firstChild.nodeValue=fn;
tab.rows[index2].cells[1].firstChild.nodeValue=fa;
tab.rows[index2].cells[2].firstChild.nodeValue=fc;
//tab.rows[index2].cells[2].firstChild.src=fi;

}

function up(e){
var curInd=findIndex(e);//得到当前行的行数
//alert(curInd);
if(curInd<1){
alert("位置存在异常");
return;
}else if(curInd==1){
alert("已经在最前位置");
return;
}
swap(curInd,curInd-1);
}

function down(e){
var curInd=findIndex(e);//得到当前行的行数
var rCount = tab.rows.length;
if(curInd<0){
alert("位置存在异常");
return;
}else if(curInd==rCount-1){
alert("已经在最后位置");
return;
}
swap(curInd,curInd+1);
}

function ordervalues(){//将id和对应的其所在的行数拼接起来作为参数传递
va = '';
trs = tab.rows;
for(i=1;i<trs.length;i++){
tr=trs[i];
fc = tr.cells[0].childNodes[1].value;
ind = i;
va+=fc+':'+ind+"|";
}
return va;
}

function doSubmit(){
var v = ordervalues();
$.ajax({
url: 'do/hotbusi_order_do.jsp',
type: 'GET',
dataType: 'TEXT',
data:{order:v},
timeout: 20000,
error: function(){
},
success: function(html){
ret = eval("("+html.trim()+")");
if(ret.retCode!=0){
alert(ret.retMsg);
}else{
alert(ret.retMsg);
location.href='hotbusi_order.jsp?code='+<%=id%>;
}
}
});
}

</script>

2.提交过去的后台处理页面：

<%@ page contentType="text/html; charset=GBK" language="java" import="com.sitech.crmpd.portal.nechn.util.*"%>
<%@ taglib uri="/WEB-INF/tlds/bestnet.tld" prefix="bnet" %>
<%
String order = request.getParameter("order");
order=order==null?"":order;
if(order.length()==0){
out.print("{retCode:-1,retMsg:'参数异常'}");
return;
}
String[] values = order.split("\\|");
%>
<bnet:service transAction="true">
<% for(int i=0;i<values.length;i++){
String value = values[i];
String topInd = value.split(":")[1];
String topCode = value.split(":")[0];
String sqlchd = "update TD_PTL_BUSIHOTINFO set levels='"+topInd+"' where istop='0' and id='"+topCode+"'";
%>
<bnet:sql sql="<%=sqlchd %>"></bnet:sql>
<% } %>
</bnet:service>
<%
String msg = "";
if("0000".equals(retCode)){
out.print("{retCode:0,retMsg:'保存成功'}");
}else{
out.print("{retCode:-1,retMsg:'保存失败'}");
}
%>

阅读全文

0 0