PDA

View Full Version : How to populate a textfield with data from a table cell?



abctech
01-30-2007, 08:42 PM
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:-


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

Rocky_kappa
08-10-2009, 06:50 AM
Hi all,
I have an exactly similar requirement as posted above . Please help me out.