Results 1 to 2 of 2

Thread: How to populate a textfield with data from a table cell?

  1. #1
    Join Date
    Jan 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default How to populate a textfield with data from a table cell?

    Hi folks,
    I am working on a web application using Java and JS and I have just basic JS and DOM knowledge.

    Here is a snapshot of my webpage, it’s a Jsp and on it I have a table (say T1) which is created dynamically and contains all the backend-table's records as rows. I am creating this dynamic table inside a <div> on Jsp1 and using a Jsp-scriptlet to get the backend data into the table. I have set a vertical scrollbar on the <div> such that user can see 4 rows of T1 at a time. Each row in T1 has a radio button associated with it which is used to select a particular row for modifying it. User can select a single row at a time.

    The requirement is that if I select the radio button on any row then the cell-contents of that row should be populated in the corresponding textfields of Jsp1.

    For eg: if the user clicks the radio of the 3rd row then ‘Student Name-textfield’ should show “Mr.Jonathan Brown”; ‘Batch-ID-textfield’ should show “1” etc i.e. every textfield should be populated with the corresponding cell value of the row.

    I have grouped the radio-buttons and the group-name is “Group” but I am totally clueless as to how to determine which row it is that has its radio clicked and how to retrieve individual cell values of the table and set them as text in the textfields of Jsp1?!

    This is somewhat how my entire webpage(JSP) looks like in brief:-

    Code:
    <%@ page language = "JAVA" import = "java.sql.*"  %>
    <html>
    <head>
    <meta name="GENERATOR" content="Microsoft FrontPage 5.0">
    <meta name="ProgId" content="FrontPage.Editor.Document">
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title></title>
    <style type=text/css>
    	# divStayTopLeft{
    		height:100px;
    		width:400px;	
    		border:1px;
    		}
    	  table.T1{
    		text-align:center;
    		font-weight:bold;
    		float:right;
    		width:450px;
    		}
    
    	.highlighted{
    		background-color:#ffffcc;
    		border:1px solid black;
    		}	
    </style>
    <script language = “javascript”>
    // some clientside validation code
    </script>
    </head>
    <body>
    <form name = “Students”>
    <table>
    <!—This is the main layout table and I have fixed my entire webpage in to this table -->
    </table>
    </form>
    <script>
    document.write('<div id="divStayTopLeft" style="position:absolute;overflow:scroll">')
    </script>
    <div id="divStayTopLeft">
    <%
    	PreparedStatement pst ; 
    	ResultSet rs = null ;
                 try{
                    pst = con.prepareStatement(“select * from Students”);	
                    rs = pst.executeQuery();
    
    	        if (rs != null){			
    	          out.write("<table class = \"T1\" id = \"TId\" border = \"1\" cellspacing=0 cellpadding=2>");
    	          out.write("<tr>");
    	          out.write("<th  bgcolor=lightgrey>Candidate Name</th>");
    	          out.write("<th  bgcolor=lightgrey>Batch-ID</th>");
    	          out.write("<th  bgcolor=lightgrey>Reg Amt</th>");
    	          out.write("<th  bgcolor=lightgrey>Total Fees </th>");
    	          out.write("<th  bgcolor=lightgrey>Balance</th>");
    	          out.write("</tr>");	
    		
    	// Here I have the code for getting the backend record and appending it to the dynamically created table T1
    	          while(rs.next()){				
    		             out.write("<tr> <td bgcolor=#ECF9FF nowrap><input type=\"radio\" value=\"V\" checked name=\"Group\"><b>" + rs.getString(1) + "</b></a></td>");	      
                                 out.write("<td>" + rs.getInt(2) + "</td>");
                                 out.write("<td>" + rs.getLong(3) + "</td>"); 
                                 out.write("<td>" + rs.getLong(4) + "</td>"); 
                                 out.write("<td>" + rs.getLong(5)+ "</td></tr>");    
    	                }		
    	          out.write("</table>");				
    	          }
    	     rs.close();	
    	     pst.close();
    	      }
    	      catch(Exception e){
    	           e.printStackTrace();
    	       }	
    %>	
    </div>
    </body>
    </html>
    Any suggestions greatly appreciated!

  2. #2
    Join Date
    Aug 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi all,
    I have an exactly similar requirement as posted above . Please help me out.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •