Home/ Questions/Q 9194207
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T21:21:12+00:00

I have created a simple site that reads a database table and displays it

  • 0

I have created a simple site that reads a database table and displays it in a html table in the browser.
I have a button that allows for the table to be altered, saved & then automatically forwarded to the homepage with the updated table.
I also have a select button with which the user can select that particular row and it updates a column in the table.

My problem is that I need a way to show which row has been selected.
I prefer to have a column in the HTML table that shows an image as to which one is selected.

Here is my homepage where the database table is being displayed.
In the left column of the html is where I would like to add an image if that row is selected.

I have tried several things like using javascript and just can’t wrap my head around it?
Can I get some help?

<%@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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
     <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>

    You need to put a hidden div with image in first column.

        <%
        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>
    • 0