后台jsp classUpdate.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<base href="<%=basePath%>">
<title></title>
<link rel="stylesheet" href="admin/css/basic.css" type="text/css" />
<link rel="stylesheet" href="admin/css/classUpdate.css" type="text/css" />
<script type="text/javascript" src="admin/js/classUpdate.js"></script>
</head>

<body>

	<div class="list">
		<table cellpadding="0" cellspacing="0">
			<tr class="explain">
				<td colspan="3">所有分类</td>
			</tr>
			<c:forEach var="item" items="${pcList }" varStatus="i">
				<tr class="item">
					<td class="key">分类 id${item.products_classify_id }</td>
					<td class="value"><input type="text"
						value="${item.products_classify_content }"
						onblur="javascript:ajaxClassifyUpdate('${item.products_classify_id }',this);" />
					</td>
					<td class="update"><a href="classUpdate">刷新</a></td>
				</tr>
			</c:forEach>
		</table>
	</div>

	<c:forEach var="item" items="${pcList }" varStatus="i">
		<div class="list">
			<table cellpadding="0" cellspacing="0">
				<tr class="explain">
					<td colspan="3">${item.products_classify_content }分类</td>
				</tr>
				<c:forEach var="item2" items="${pbList }" varStatus="i">
					<c:if
						test="${item.products_classify_id eq item2.products_classify_id }">
						<tr class="item">
							<td class="key">品牌 id${item2.products_brand_id }</td>
							<td class="value"><input type="text"
								value="${item2.products_brand_content }"
								onblur="javascript:ajaxBrandUpdate('${item2.products_brand_id  }',this);" />
							</td>
							<td class="update"><a href="classUpdate">刷新</a></td>
						</tr>
					</c:if>
				</c:forEach>
			</table>
		</div>
	</c:forEach>
	<div style="height:30px;"></div>
</body>
</html>

 

/* CSS Document */

.list{ width:600px; margin:20px auto 0 auto;}
.list table{ width:100%; border-top:1px solid #ccc; border-left:1px solid #ccc;}
.list table td{ height:21px; text-align:center; border-bottom:1px solid #ccc; border-right:1px solid #ccc;}
.list table .explain td{ background:#f4f4f4; font-family:"微软雅黑"; color:#333; font-weight:bold;}
.list table .item .key{ background:#436da8; color:#fff; font-family:"微软雅黑"; width:120px; text-align:right; padding-right:10px;}
.list table .item .value{ color:#333; font-family:"微软雅黑";}
.list table .item .value input{ color:#c00; width:160px; font-family:"微软雅黑"; margin-left:10px; text-align:center; border:none;}
.list table .item .update{ color:#333; font-family:"微软雅黑"; width:120px; text-align:left; padding-left:10px;}

 

//JavaScript Document

function ajaxClassifyUpdate(productsClassifyId,obj){
	var xmlHttp = new XMLHttpRequest();
	var url = "ajaxClassUpdate?productsClassifyId="+escape(productsClassifyId)+"&classifyContent="+encodeURI(encodeURI(obj.value));
	xmlHttp.open("GET", url);//设置一个请求
	xmlHttp.onreadystatechange = function() {	//设置请求完成之后处理的回调函数  
		if (xmlHttp.readyState == 4) {//数据返回完毕  
			if (xmlHttp.status == 200) {//HTTP操作正常  
				var text = xmlHttp.responseText;//接收返回的内容  
				alert(text);
			}
		}
	};
	xmlHttp.send(null);//发送请求,不传递任何参数  	
}

function ajaxBrandUpdate(productsBrandId,obj){
	var xmlHttp = new XMLHttpRequest();
	var url = "ajaxBrandUpdate?productsBrandId="+escape(productsBrandId)+"&brandContent="+encodeURI(encodeURI(obj.value));
	xmlHttp.open("GET", url);//设置一个请求
	xmlHttp.onreadystatechange = function() {	//设置请求完成之后处理的回调函数  
		if (xmlHttp.readyState == 4) {//数据返回完毕  
			if (xmlHttp.status == 200) {//HTTP操作正常  
				var text = xmlHttp.responseText;//接收返回的内容  
				alert(text);
			}
		}
	};
	xmlHttp.send(null);//发送请求,不传递任何参数  	
}

 效果图:
后台jsp classUpdate.jsp_第1张图片
 

 

 

 

 

你可能感兴趣的:(update)