使用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> <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>
分享到：
相关推荐
本文将详细介绍如何在JSP中实现分页，并结合数据库进行数据检索。 首先，我们需要理解分页的基本概念。分页是将大量数据分为多个小部分，每次只加载一部分到页面上，用户可以通过翻页按钮来查看其他数据。在JSP中，...
总之，"JSP上传与下载Demo_带数据库"项目展示了如何在JSP环境中实现文件上传和下载功能，同时管理和跟踪这些文件的信息。这不仅涉及到JSP、Servlet、数据库操作的基本概念，还涵盖了安全性、性能优化等多个方面。...
在初学Web开发的过程中，JSP（JavaServer Pages）是一个常用的技术，用于创建动态网页。JSP结合了HTML和Java代码，使得开发者可以方便地在页面上处理服务器端逻辑。本教程将介绍如何使用JSP实现一个简单的登录注册...
基于ssm+jsp实现仓库管理系统源码+数据库（高分项目）基于ssm+jsp实现仓库管理系统源码+数据库（高分项目）基于ssm+jsp实现仓库管理系统源码+数据库（高分项目）基于ssm+jsp实现仓库管理系统源码+数据库（高分项目）...
在本项目中，"简易的JavaWeb实现增删查改（附数据库）"是一个基于JavaWeb技术的小型应用程序，主要用于演示如何使用Java、JSP和MySQL数据库来实现基本的CRUD（创建、读取、更新和删除）操作。以下是这个项目涉及到的...
这通常需要在JSP页面中实现逻辑判断，根据用户的登录状态和角色权限来决定他们可以访问哪些功能。 具体实现时，可以创建一个session管理用户信息，当用户成功登录后，将其身份信息存储在session中。随后，对每个JSP...
本项目以"jsp页面，连接数据库实现增删改查"为主题，旨在创建一个用户注册与登录功能，通过与数据库交互来管理用户信息，实现数据的增删改查操作。 首先，我们需要理解JSP的基本原理。JSP是一种服务器端脚本语言，...
【JSP实现将图片上传到数据库】的知识点涵盖了图片上传的基本原理、文件上传组件的使用、JSP中处理图片数据的流程以及服务器端文件的存储形式。以下是详细说明： 1. **图片上传原理**： 图片上传是客户端通过Web...
JSP允许开发者在HTML代码中嵌入Java代码，从而实现与后端数据库的交互，包括读取、写入、更新和删除数据。本文将深入探讨如何使用JSP来连接数据库，并基于此修改数据库内容的关键知识点。 ### 1. JSP与数据库连接 ...
综上所述，这个项目涵盖了JSP基本语法、表单处理、数据库连接、SQL操作和用户信息的显示，是Web开发中一个典型的前后端交互示例。通过实践这样的项目，开发者可以深入理解JSP在实际应用中的角色，以及如何与其他技术...
【JSPDemo2.zip】是一个包含JSP...实际项目中，JSPDemo2.zip的具体内容可能会有所不同，包括但不限于数据库配置、用户认证机制、异常处理策略等。对于深入学习，建议解压文件并逐步分析每个组成部分的功能和作用。
本项目通过结合JSP（JavaServer Pages）和MySQL数据库实现了这样一个系统，旨在为不同身份的用户提供安全的登录功能。以下将详细讲解该项目涉及的技术点和实现流程。 1. **JSP**：JSP是一种动态网页技术，它允许...
【标题】"用jsp实现的搜索提示...总的来说，"用jsp实现的搜索提示功能"项目涵盖了Web开发中的多个重要概念和技术，包括前后端交互、数据库操作、动态网页编程以及开发工具的使用，是学习和提升JSP开发技能的好实例。
### 在JSP中调用JavaBean实现Web数据库访问的关键知识点 #### 1. JSP与数据库访问背景 在Web开发领域，JSP（Java Server Pages）作为一种动态网页技术，广泛应用于构建交互式网站。数据库访问作为JSP应用程序的...
本实例实现了从jsp页面往mysql数据库中存入汉字，再从mysql数据库中读出中文数据。 本程序存入数据库中的是我的注册页面中的数据，注册后可以到数据中查看。显示的出来的数据是我的第一个注册的用户的数据。可以和...
jsp中使用数据库，实现不同数据库的连接与应用
本主题将深入探讨如何使用JSP和Servlet来实现一个图片上传功能，并将图片数据存储到Oracle数据库中。 首先，我们需要理解JSP和Servlet的角色。JSP是用于创建动态内容的视图层技术，而Servlet则是Java编写的应用程序...
在本实验中，登录验证同样基于文本文件，实际项目中应该使用数据库查询来实现。 JSP页面中，`<jsp:useBean>`指令用于实例化并初始化JavaBean，这里的`id`属性指定了JavaBean在页面作用域内的名字，`class`属性指定...
【标题】"jsp论坛源代码（附数据库文件）（原创）"揭示了这是一个基于Java Server Pages（JSP）技术开发的论坛系统，并且包含了数据库文件。这个系统是原创的，意味着它是由开发者独立设计和实现的，可能具有独特的...