`

JSP 中实现行内编辑效果 DEMO 附数据库

JSPCSSHTML 
阅读更多
使用JS 实现的行内编辑效果  如果大家有其它的解决方法 指点下


首页代码 使用的JS 加 JSP  使用了CSS 
<%@ page language="java" pageEncoding="GBK" contentType="text/html; charset=GBK"%>
<%@page import="bo.BOMessage"%>
<%@page import="java.util.ArrayList"%>
<%@page import="entity.Message"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
   <title>编辑数据</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<link rel="stylesheet" type="text/css" href="css/styles.css">
	<style type="text/css">
		#contentDiv{
			width:700px;
			margin-left:130px;
		}
		td{
			line-height: 18px;
		}
		#addDiv{
			width:700px;
			margin-left:130px;
		}
		
		.nameTxt{
			font-size:12px;
			border:1px redge #227799;
			width:95px;
			height:15px;
			background-color:#bbeedd;
		}
		
		.emailTxt{
			font-size:12px;
			border:1px redge #227799;
			width:130px;
			height:15px;
			background-color:#bbeedd;
		}
		
		.addressTxt{
			font-size:12px;
			border:1px redge #227799;
			width:200px;
			height:15px;
			background-color:#bbeedd;
		}
	</style>
	
	<script type="text/javascript">
		function changeView(id,name,email,address,birthday){
			objname = document.getElementById('tdname'+id);
			objemail = document.getElementById('tdemail'+id);
			objaddress = document.getElementById('tdaddress'+id);
			objbirthday = document.getElementById('tdbirthday'+id);
			objmanage = document.getElementById('tdmanage'+id);
			objname.innerHTML="<input type='text' name='name"+id+"' id='name"+id+"' class='nameTxt' value='"+name+"'><input type='hidden' name='id' value='"+id+"'>";
			objemail.innerHTML="<input type='text' name='email"+id+"' id='email"+id+"' class='emailTxt' value='"+email+"'>";
			objaddress.innerHTML="<input type='text' name='address"+id+"' id='address"+id+"' class='addressTxt' value='"+address+"'>";
			objbirthday.innerHTML="<input type='text' name='birthday"+id+"' id='birthday"+id+"' class='nameTxt' value='"+birthday+"'>";
			objmanage.innerHTML="<a href=javascript:document.getElementById('dataform').submit()>OK</a> &nbsp;<a href=index.jsp>Cancel</a>";
		}
	</script>
</head>
  
  <body>
    <div id="mainDiv">
    	<div id="addDiv">
    		<h3>Information</h3>
    		<form action="doadd.jsp" method="post">
    			<table width="100%">
    				<tr>
    					<td>Name:</td>
    					<td><input type="text" name="newname" class="normalTxt"></td>
    				</tr>
    				<tr>
    					<td>Email:</td>
    					<td><input type="text" name="newemail" class="middleTxt" size="150"></td>
    				</tr>
    				<tr>
    					<td>Address:</td>
    					<td><input type="text" name="newaddress" class="longTxt"></td>
    				</tr>
    				<tr>
    					<td>BirthDay:</td>
    					<td><input type="text" name="newbirthday" class="normalTxt"></td>
    				</tr>
    				<tr>
    					<td colspan="2">
    						<input type="submit" value="Submit" class="normalBtn">&nbsp;
    						<input type="reset" value="Reset" class="normalBtn">
    					</td>
    				</tr>
    			</table>
    		</form>
    	</div>
    	
    	<%
    		request.setCharacterEncoding("GBK");
    		//业务逻辑类
    		BOMessage boMessage = new BOMessage();
    		//得到实体类对象集合
    		ArrayList<Message> list = boMessage.getMessageList();
    	%>
    	<div id="contentDiv">
    		<h3>Information Details</h3>
    		<form  action='doupdate.jsp' method='post' id="dataform">
    		<table width="100%" border="1" bordercolor="#227799" cellspacing="0" cellpadding="2">
    			<tr>
    				<th width="5%">ID</th>
    				<th width="15%">Name</th>
    				<th width="20%">Email</th>
    				<th width="30%">Address</th>
    				<th width="15%">BirthDay</th>
    				<th width="15%">Edit</th>
    			</tr>
    	
    	<%
    		for(int i=0;i<list.size();i++){
    				Message message = list.get(i);
    	%>
    			<tr>
    				<td width="5%"><%=message.getId() %></td>
    				<td width="15%" id="tdname<%=message.getId()%>"><%=message.getName() %></td>
    				<td width="20%" id="tdemail<%=message.getId()%>"><%=message.getEmail() %></td>
    				<td width="30%" id="tdaddress<%=message.getId()%>"><%=message.getAddress() %></td>
    				<td width="15%" id="tdbirthday<%=message.getId()%>"><%=message.getBirthDay() %></td>
    				<td width="15%" id="tdmanage<%=message.getId()%>">
    					<a href="javascript:changeView('<%=message.getId()%>','<%=message.getName() %>','<%=message.getEmail() %>','<%=message.getAddress() %>','<%=message.getBirthDay() %>')">Edit</a>&nbsp;
    					<a href="dodelete.jsp?id=<%=message.getId()%>">Delete</a>
    				</td>
    			</tr>	
    	<%			
    		}
    	%>
    		</table>
    		</form>
    	</div>
    </div>
  </body>
</html>

3
顶
0
踩
分享到：
| JSP 上传和下载DEMO 源码加数据库
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics