今天有点累了，就不多做其他的描述解释。在插入的代码里相关解释也都有。
<!--<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <html xmlns="http://www.w3.org/1999/xhtml">--> <!--<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">--> <!DOCTYPE html> <html> <head> <!-- <base href="<%=basePath%>">--> <!-- <%@ include file="/include/meta.jsp"%> <title>My JSP 'hello.jsp' starting page</title>--> <meta charset="UTF-8"> <script src="js/jquery.js"></script> <!-- <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="styles.css"> --> </head> <style type="text/css"> div{ margin-left: 30px; } table{ border: 1px double #b8d4d1; /*消除表格之间的间距*/ border-collapse: collapse; } th{ border-top: 1px double #b8d4d1; border-right: 1px double #b8d4d1; font-size: 20px; text-align: center; /*必须存在最大的宽度否则td里的信息不会缩略显示*/ max-width: 50px; /*规定段落中的文本不进行换行*/ white-space: nowrap; /*内容过多的隐藏*/ overflow: hidden; /*溢出的文字显示为省略号*/ text-overflow: ellipsis; /*消除表格之间的间距*/ /*border-collapse: collapse;*/ background: linear-gradient(#cafce7,#ffffff); background:-moz-linear-gradient(top,#cafce7,#ffffff); background:-webkit-linear-gradient(top,#cafce7,#ffffff); } td { border-top: 1px double #b8d4d1; border-right: 1px double #b8d4d1; text-align: center; /*必须存在最大的宽度否则td里的信息不会缩略显示*/ max-width: 50px; /*规定段落中的文本不进行换行*/ white-space: nowrap; /*内容过多的隐藏*/ overflow: hidden; /*溢出的文字显示为省略号*/ text-overflow: ellipsis; /*消除表格之间的间距*/ /*border-collapse: collapse;*/ /* background: linear-gradient(#cafce7,#ffffff); background:-moz-linear-gradient(top,#cafce7,#ffffff); background:-webkit-linear-gradient(top,#cafce7,#ffffff);*/ } #top{ height: 100px; } #bottom{ height: 400px; border: 1px double #b8d4d1; } /*鼠标停留在tr标签上时改变颜色*/ tr:hover{ background-color: #e4e8ec; } </style> <script src="js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { //将点击的tr对象化 $("tr").click(function () { //在点击事件里使用children()方法和eq(1)方法获取tr下的每个td元素的内容 var username=$(this).children().eq(1).text(); var password=$(this).children().eq(2).text(); //在个input标签赋值 $("#username").val(username); $("#password").val(password); }); }); </script> <body> <div id="top"> <form action="myUser/save" method="post"> <input type="hidden" name="id"/> 帐号：<input type="text" id="username" name="username"/><br/> 密码：<input type="text" id="password" name="password"/><br/> <input type="submit" style="float:none;" value="保存"/> </form> </div> <div id="bottom"> <table cellpadding="0" cellspacing="0" border="0" width="100%"> <thead> <tr> <th>序号</th> <th>帐号</th> <th>密码</th> <th>操作</th> </tr> </thead> <tbody> <!-- <c:forEach items="${pageInfo.content}" var="MyUser" varStatus="status"> <tr> <td> ${status.count} </td> <td> ${MyUser.username} </td> <td> ${MyUser.password} </td> <td><a href="myUser/del?id=${MyUser.id}">删除</a></td> </tr> </c:forEach>--> <tr> <td>主键</td> <td>帐号</td> <td>密码</td> <td>操作</td> </tr> <tr> <td>主</td> <td>帐号1</td> <td>密码1</td> <td>操作</td> </tr> </tbody> </table> </div> <!--<tags:pagination page="${pageInfo}" paginationSize="5"/>--> </body> </html>