JSP 中实现行内编辑效果 DEMO 附数据库
使用JS 实现的行内编辑效果如果大家有其它的解决方法 指点下http://lvp.iteye.com/upload/picture/pic/32529/3f0682f7-d97d-332e-8756-1f64ac9926ef.bmp
首页代码 使用的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> <formaction='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>
页:
[1]