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

最新推荐文章于 2022-04-06 19:36:36 发布

kakunaka

最新推荐文章于 2022-04-06 19:36:36 发布

阅读量618

点赞数 1

分类专栏： JSP和Servlet 文章标签： JSP CSS HTML

JSP和Servlet 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

使用JS 实现的行内编辑效果如果大家有其它的解决方法指点下
[img]http://lvp.iteye.com/upload/picture/pic/32529/3f0682f7-d97d-332e-8756-1f64ac9926ef.bmp[/img]

首页代码使用的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>  <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"> 
    						<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> 
    					<a href="dodelete.jsp?id=<%=message.getId()%>">Delete</a>
    				</td>
    			</tr>	
    	<%			
    		}
    	%>
    		</table>
    		</form>
    	</div>
    </div>
  </body>
</html>