使用 JSP 显示带有图像的数据库值答案

【问题标题】：showing database value with an image using JSP使用 JSP 显示带有图像的数据库值
【发布时间】：2012-10-26 12:53:54
【问题描述】：

我创建了一个简单的站点，它读取数据库表并将其显示在浏览器的 html 表中。我有一个按钮，允许更改、保存表格，然后使用更新的表格自动转发到主页。我还有一个选择按钮，用户可以使用它选择特定的行并更新表中的列。

我的问题是我需要一种方法来显示已选择的行。我更喜欢在 HTML 表中有一列显示一张图片，说明选择了哪一张。

这是我的主页，其中显示了数据库表。如果选择了该行，我想在 html 的左列中添加图像。

我已经尝试了几种方法，例如使用 javascript，但我无法理解它？我能得到一些帮助吗？

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="java.io.*, java.util.*, java.sql.*"%>
<%@page import="oracle.jdbc.driver.OracleConnection" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script language="javascript">

    function editRecord(id) {
        var f=document.form;
        f.method="post";
        f.action='edit.jsp?id='+id;
        f.submit();
    }

    function selectRecord(id, btn, i) {
        var f=document.form;
        f.method="post";
        f.action='select.jsp?id='+id;
        f.submit();

        if(!btn.style) {
            alert("not supported");
            return;
        } else{
            btn.style.background = "red";
            return;
        }
    }
    </script>
</head>

<body>
    <br><br>
    <form method="post" name="form">
        <table id="data" border="1">
        <tr>
            <th>Selected</th>
            <th>Name</th>
            <th>Address</th>
            <th>Contact No</th>
            <th>Email</th>
            <th>Select</th>
        </tr>
        <%
        int sumcount=0;
        ResultSet rs = null;
        Connection con = null;
        Statement st = null;

        try {
            DriverManager.registerDriver (new oracle.jdbc.OracleDriver());
            con = DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:XE", "username", "password");

            st = con.createStatement();
            rs = st.executeQuery("SELECT * FROM employee");
        %> 
        <%
            while(rs.next()) {
        %>
            <tr>
                <td></td>
                <td><%=rs.getString(2)%></td>
                <td><%=rs.getString(3)%></td>
                <td><%=rs.getString(4)%></td>
                <td><%=rs.getString(5)%></td>
                <td><input type="button" name="edit" value="Edit" style="background-color:#49743D;font-weight:bold;color:#ffffff;" onclick="editRecord(<%=rs.getString(1)%>);" /></td>
                <td><input type="button" name="select" value="Select" style="background-color:#49743D;font-weight:bold;color:#ffffff;" onclick="selectRecord(<%=rs.getString(1)%>, this);" /></td>
            </tr>
        <%
            }
        %>
        <%
        }
        catch(Exception e){
            e.printStackTrace();
        }
        %>

        </table>
    </form>
</body>
</html>

【问题讨论】：

不确定 JSP，但我会使用一些 JQuery 和 ajax 来获取所选行的标识符并更改它的 css 以指示选择状态。 ajax 应该将所选行的标识符传递给某个服务器脚本或其他任何东西，以便可以在数据库端对其进行操作
嗨乔希，你还在努力解决这个问题，或者你能想出一个解决方案吗？如果你愿意，我很想听听。

标签： javascript html database image jsp

【解决方案1】：

 <script language="javascript">

    function editRecord(id) {
        var f=document.form;
        f.method="post";
        f.action='edit.jsp?id='+id;
        f.submit();
    }

    function selectRecord(id, btn, i) {
     //Here goes the code to display image
        var images = document.getElementsByName("selectImg");
        for(var i=0;i<images.length;i++){
            if(images[i].id!="img_"+id)
               images[i].style.display="None";
            else
               images[i].style.display="Block";
         }
     //End
        var f=document.form;
        f.method="post";
        f.action='select.jsp?id='+id;
        f.submit();

        if(!btn.style) {
            alert("not supported");
            return;
        } else{
            btn.style.background = "red";
            return;
        }
    }
    </script>

您需要在第一列中放置一个带有图像的隐藏 div。

    <%
        while(rs.next()) {
    %>
        <tr>
            <td><div name="selectImg" id="img_<%=rs.getString(1)%>">
                <img src="path_to_image"></div></td>
            <td><%=rs.getString(2)%></td>
            <td><%=rs.getString(3)%></td>
            <td><%=rs.getString(4)%></td>
            <td><%=rs.getString(5)%></td>
            <td><input type="button" name="edit" value="Edit" style="background-color:#49743D;font-weight:bold;color:#ffffff;" onclick="editRecord(<%=rs.getString(1)%>);" /></td>
            <td><input type="button" name="select" value="Select" style="background-color:#49743D;font-weight:bold;color:#ffffff;" onclick="selectRecord(<%=rs.getString(1)%>, this);" /></td>

【讨论】：