本菜鸟做的一个小demo模板,如图,点击create按钮 右边弹出div ,在本页面直接修改数据。
用 document.getElementById只能提取到第一条数据到修改的input中,想要点击哪一行的create,右边input内value就变成当前行数据。css代码就不贴了 。 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>111</title>
</head>
<body>
<%
    //加载驱动程序
    Class.forName("com.mysql.jdbc.Driver").newInstance();
//数据库信息
    String user="root";
//密码
    String password="1234566";
//数据库名
    String dbName="testdemo";
//表名
    String tableName="student";
//将数据库信息字符串连接成为一个完整的url(也可以直接写成url,分开写是明了可维护性强)
    String url="jdbc:mysql://localhost:3306/"+dbName+"?user="+user+"&password="+password;    //配置并连接数据库
    Connection conn = DriverManager.getConnection(url, user, password);
    Statement stmt = conn.createStatement();
%>
<%--表单--%>
<table class="bordered">
    <thead>
    <tr>
        <th>ID</th>
        <th>NAME</th>
        <th>CLASS</th>
        <th>AGE</th>
        <th><input onclick="add()" type="button"  class="xinzeng" value="CREATE"></th>
    </tr>
    </thead>    <%
        String sql = "SELECT * FROM "+tableName;
        ResultSet rs = stmt.executeQuery(sql);
        %>
    <%               //想要这个循环体内的三个input的值传递到最后那个form里面的input中。
        while(rs.next()) {
    %>
    <tr>
        <td><%=rs.getString("id") %></td>
        <td><%=rs.getString("name") %><input name="name"  type="hidden"  value="<%=rs.getString("name") %>"></td>
        <td><%=rs.getString("class") %><input name="class"  type="hidden"  value="<%=rs.getString("class") %>"></td>
        <td><%=rs.getString("age") %><input name="age"  type="hidden"  value="<%=rs.getString("age") %>"></td>
        <td>
            <%--<form  action="update1.jsp" method="post">--%>
                <input type="hidden" name="id" value="<%=rs.getString("id") %>">
                <input onclick="update()" class="xiugai" type="button" value="UPDATE">
            <%--</form>--%>
            <form  action="deleteaction.jsp" method="post">
                <input type="hidden" name="id" value="<%=rs.getString("id") %>">
                <input class="shanchu" type="submit" value="DELETE">
            </form>
        </td>
    </tr>    <%
        }
    %>
</table>
<div class="D1">
    <div id="div1" class="dd">
        <form action="insertaction.jsp" method="post">
        <ul>
            <li><p>CREATE A NEW STUDENT</p></li>
            <li><div><span>NAME:</span><input type="text" name="name1"></div></li>
            <li><div><span>CLASS:</span><input type="text" name="class1"></div></li>
            <li><div><span>AGE:</span><input type="text" name="age1"></div></li>
            <li><input type="submit" value="SUBMIT"></li>
        </ul>
        </form>
    </div>
    <div id="div2" class="dd">
        <form action="" method="post">
            <ul>
                <li><p>UPDATE STUDENT INFO</p></li>
                <li><div><span>NAME:</span><input id="updateName1" type="text" value=""></div></li>
                <li><div><span>CLASS:</span><input id="updateClass1" type="text"  value=""></div></li>
                <li><div><span>AGE:</span><input id="updateAge1" type="text" ></div></li>
                <li><input type="submit" value="SUBMIT"></li>
            </ul>
        </form>
    </div>
</div>
<%
    rs.close();
    stmt.close();
    conn.close();
%>
</body>
</html>