3

データベーステーブルを読み取り、ブラウザの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>
4

1 に答える 1

2 
 <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>
于 2013-01-27T04:45:27.417 に答える