table 上移下移保存时获取每行中的值将排序记录保存到数据库

最新推荐文章于 2021-04-17 09:27:34 发布

jkjlovezy_4

最新推荐文章于 2021-04-17 09:27:34 发布

阅读量735

点赞数

分类专栏： js 文章标签： table input function xhtml path null

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<%@ page language="java" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!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" />
<title>应用之星后台管理</title>

<script type="text/javascript" src="<%=path %>/js/jquery-1.4.2.js"></script>
<script type="text/javascript">
var moveRow;
function checkNews(obj){
	moveRow = obj.parentNode;
	//alert(moveRow.innerHTML);
	var trs =  document.getElementById("DynaTable").rows;
	for(var i = 0 ;i<trs.length;i++){
		trs[i].cells[0].style.backgroundColor="red";
	};
	obj.style.backgroundColor='blue';
	
}
function check(oper){
	// var data_tr=$(t).parent().parent(); //获取到触发的tr
	var data_tr = moveRow
	if(oper=="MoveUp"){    //向上移动
		if($(data_tr).prev().html()==null){ //获取tr的前一个相同等级的元素是否为空
		    alert("已经是最顶部了!");
		    return;
		}
		$(data_tr).insertBefore($(data_tr).prev()); //将本身插入到目标tr的前面 
		
	}else{
	    if($(data_tr).next().html()==null){
	         alert("已经是最低部了!");
	         return;
	    }
	    $(data_tr).insertAfter($(data_tr).next()); //将本身插入到目标tr的后面 
	    
	}
}
function save(){
	var result ='';
	var trs =  document.getElementById("DynaTable").rows;
	for(var i = 0 ;i<trs.length;i++){
		result += trs[i].cells[0].firstChild.value+",";
	};
	alert("保存后的排序为："+result);
}
</script>
</head>

<body>
<button οnclick="check('MoveUp')">上移</button><button οnclick="check('MoveDown')">下移</button><button οnclick="save()">保存</button>
<table id = "DynaTable">
	<tr>
		<td style="width: 300px;background-color: red" οnclick="checkNews(this)">
			<input type="hidden" name="newsId" value="1"></input>a
		</td>
	</tr>
	<tr>
		<td style="width: 300px;background-color: red" οnclick="checkNews(this)">
			<input type="hidden" name="newsId" value="2"></input>b
		</td>
	</tr>
	<tr>
		<td style="width: 300px;background-color: red" οnclick="checkNews(this)">
			<input type="hidden" name="newsId" value="3"></input>c
		</td>
	</tr>
</table>
</body>
</html>

jkjlovezy_4

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
table 上移下移保存时获取每行中的值将排序记录保存到数据库

<%String path = request.getContextPath();%>应用之星后台管理/js/jquery-1.4.2.js">var moveRow;function checkNews(obj){ moveRow = obj.parentNode; //alert(moveRow.innerHTML); var t
复制链接

扫一扫