如何用Ajax实现在同一个页面上将表格传送给另外一个表格

Miss玺 2016-01-15 10:09:33
我想做一个添加，删除，保存的功能
<%@ page contentType="text/html;charset=UTF-8"%>

<%@ include file="/commons/taglibs_new.jsp"%>

<%

	String path = request.getContextPath();

	String basePath = request.getScheme() + "://"

			+ request.getServerName() + ":" + request.getServerPort()

			+ path + "/";

	request.setAttribute("basePath", basePath);

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<base href="<%=basePath%>">

<link

	href="${basePath}static_resources/js/ligerUI/skins/Aqua/css/ligerui-all.css"

	rel="stylesheet" type="text/css">

<link

	href="${basePath}static_resources/js/ligerUI/skins/ligerui-icons.css"

	rel="stylesheet" type="text/css">

<script src="${basePath}static_resources/js/ligerUI/js/core/base.js"

	type="text/javascript"></script>

<script

	src="${basePath}static_resources/js/ligerUI/js/plugins/ligerDrag.js"

	type="text/javascript"></script>

<script

	src="${basePath}static_resources/js/ligerUI/js/plugins/ligerDialog.js"

	type="text/javascript"></script>

<script

	src="${basePath}static_resources/js/ligerUI/js/plugins/ligerResizable.js"

	type="text/javascript"></script>

<script type="text/javascript"

	src="${basePath}static_resources/js/ZYLib/ZYCommLib.js"></script>

<script type="text/javascript"

	src="${basePath}static_resources/js/common.js"></script>

<link href="${basePath}static_resources/js/ZYLib/zyLib.css"

	rel="stylesheet" type="text/css" />

<style type="text/css">

.l-case-title {

	font-weight: bold;

	margin-top: 20px;

	margin-bottom: 20px;

}

</style>

<title>My JSP 'listToShow.jsp' starting page</title>

<script type="text/javascript">

	function childFunction() {

		var deptId = window.parent.$("#deptId").val();

		var userName = encodeURI(encodeURI(window.parent.$("#userName").val()

				.Trim()));

		document.getElementById("listToShowForm").action = "${basePath}common/showHisUserInfo.action?method=showAllUserList&deptId="

				+ deptId + "&userName=" + userName;

		$("#listToShowForm").submit();

		//window.location.href = "${basePath}highValueConsum/vendorcatalog.action?method=showAllCatalog&vendorId="+ vendorId;

	}



	/**

	 * 点击列表一条记录变色

	 */

	var trObj = null;

	function trClick(obj) {

		//点击表格中一行数据变色，其他行数据不变色

		if (trObj != null) {

			$(trObj).css('background-color', 'white');

			$(obj).css('background-color', '#cccccc');

		} else {

			$(obj).css('background-color', '#cccccc');

		}

		trObj = obj;

	}

	

	//全选

	//function allchoose(tag){

		

		//当前标签是否是选中状态

		//var b=tag.checked;

		

		//获得所有check标签

		//var arr=document.getElementsByName("check");

		//将当前标签的状态赋值给其余所有复选框

		//for(var i=0;i<arr.length;i++){

			//arr[i].checked=b;

		//}

	//}

	$(function(){

		$("#selectAllCheck").click(function() {

			if ($(this).attr("checked")) {

				$("input[name='selectOne']").attr("checked", true);

			} else {

				$("input[name='selectOne']").attr("checked", false);

			}

			$("#consumableSourcecode").focus();

		})

		$("input[name='selectOne']").click(function() {

			var isAllChecked = (function() {

				var allChecked = true;

				$("input[name='selectOne']").each(function() {

					if (!$(this).attr("checked")) {

						allChecked = false;

					}

				})

				return allChecked;

			})();

			if ($(this).attr("checked")) {

				if (isAllChecked) {

					$("#selectAllCheck").attr("checked", true);

				}

			} else {

				$("#selectAllCheck").attr("checked", false);

			}

		})

	})

</script>

</head>

<body>

	<form method="post" id="listToShowForm">

		<p:pagedetail>

			<div id="Layer1" style="position:absolute;width:600px;height:80px;z-index:1">

				<table id="createTable" class="resultlst">

					<tr>

						<th><input type="checkbox" id="selectAllCheck"

							name="selectAllCheck">全选/全不选</th>

						<th></th>

						<th>工号</th>

						<th>姓名</th>

						<th>科室</th>

						<th>角色</th>



					</tr>

					<c:forEach items="${showAllUserList}" var="e" varStatus="index">

						<tr onclick="trClick(this)">

							<td><input type="checkbox" name="selectOne" id="selectOne">

							</td>

							<td>${index.index+1}</td>

							<td><input type="hidden" value="${e.deptId}" />

								${e.userCode}</td>

							<td>

								<%-- <input type="hidden" value="${e.consumableExtendId}"/> --%>

								${e.uesrName}</td>

							<td>${e.deptName}</td>

							<td>${e.roleName}</td>

						</tr>

					</c:forEach>

				</table>

			</div>

			<div id="Layer2" style="position:absolute;left:680px;width:600px;height:80px;z-index:2">

				<table id="getTable" class="resultlst">

					<tr>

						<th><input type="checkbox" name="checkall" id="checkall">

						</th>

						<th></th>

						<th>工号</th>

						<th>姓名</th>

						<th>科室</th>

						<th>角色</th>



					</tr>

				</table>

			</div>

			<div id="Layer3" style="position:absolute;left:600px;width:100px;height:80px;z-index:3">

				<table id="gongneng" class="resultlst">

					

					<tr>

						<td>

							<input type="button" id="addToRight" name="addToRight" value="添加">

						</td>

					</tr>

					

					<tr>

						<td>

							<input type="button" id="save" name="save" value="保存">

						</td>	

					</tr>

					

					<tr>

						<td>

							<input type="button" id="cancel" name="cancel" value="撤消">

						</td>

					</tr>

					

				</table>

			</div>

		</p:pagedetail>

		<p:footercon></p:footercon>

	</form>

</body>

</html>
...全文
240 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
vswen5 2016-01-18
  • 打赏
  • 举报
 回复 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="div1">
<p id="p1"><input type="text"/></p>
</div>
<input type="button" value="点击复制" id="but1">
</body>
<script src="jquery-1.7.2.min.js"></script>
<script type="text/javascript"> 
$("#but1").click(function(){
	var c = $("#p1").clone();
	$("#div1").append($(c));
})
</script> 
</html>
Miss玺 2016-01-18
  • 打赏
  • 举报
 回复
引用 3 楼 xiaofanku 的回复:
同一个地址中数据移动有必要用ajax吗？直接用js 复制就可以
那怎麽复制？能不能展示下代码？我是新手，才刚知道用jquery
Miss玺 2016-01-18
  • 打赏
  • 举报
 回复
大家能不能写写关于我写的代码？我是新手，你们说的我都不懂，也别给新的例子了
斯洛文尼亚旅游 2016-01-15
  • 打赏
  • 举报
 回复
自己看jquery的ajax怎么用 http://www.w3school.com.cn/jquery/ajax_ajax.asp
街头小贩 2016-01-15
  • 打赏
  • 举报
 回复
同一个地址中数据移动有必要用ajax吗？直接用js 复制就可以
Miss玺 2016-01-15
  • 打赏
  • 举报
 回复
引用 1 楼 showbo 的回复:
自己看jquery的ajax怎么用 http://www.w3school.com.cn/jquery/ajax_ajax.asp
谢谢，我在自学
layUI表格--获取选中当前行数据并通过ajax向后台传送数据并更新表格
本文介绍了如何使用layUI表格获取选中行数据，并通过AJAX发送到后台进行处理。在layUI的table工具事件中，利用`table.on('tool(test)', function(obj) {...})`获取数据，通过AJAX设置URL、数据、请求方法和类型，成功后更新表格内容。后台代码通过`request.getParameter(borId)`接收前端传来的数据。 106604797,521551,Python函数详解与应用,['Python', '编程语言', '函数', '递归']
ajax向后台传送表格内数据,通过Ajax把数据参数传送到后台
本文讨论了一个JavaScript函数，如何通过$.ajax获取Initiator数据，并将其发送到'/Portal/Customer/DaQuYuCeJianCha'，以更新子表内容。作者提供了几种可能的解决方案，包括正确设置Initiator变量和使用POST请求进行数据传递。
Django框架中使用Ajax实现数据的实时加载
本文介绍了在Django框架的Web页面上进行异步刷新的方法。涵盖Django需导入的包、代码编写，包括从数据库取数据、对Ajax请求发送数据，还给出页面代码，使用Highcharts图表，通过Ajax实现异步刷新，同时提醒注意数据库和传递键名的设置。
查询表格——建立动态表格，使用ajax输入查询条件将后台数据查询出来以表格的形式展示出来...
本文介绍如何使用Ajax实现动态表格的查询功能。包括构建查询条件、动态生成表格表头及内容，以及通过Ajax从前台向后台传递查询条件并接收查询结果。
ajax向后台传送表格内数据,在Spring Security中使用AJAX向后台传送数据
当集成SpringSecurity4.1.3和Spring4.2.3后，使用AJAX请求时遇到Invalid CSRF token错误。该问题由于缺少CSRF保护导致，SpringSecurity默认开启CSRF防护。解决方法包括在JSP或Thymeleaf模板中添加CSRF相关meta标签，并在AJAX请求头中携带正确的CSRF token。具体操作包括在前端获取token并设置到请求头中，例如使用jQuery进行设置。
Ajax

52,778

社区成员

25,334

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 Ajax
社区管理员
  • Ajax
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章