Fetch contents of a row from HTML table using '<tr onclick=alertContents()>'

Question

i fetched and displayed data as a table in html from mysql db using jsp and java now what i want is when a user clicks on the particular row then the data in that row should populate in 3 different tags example if my table has this data

Name Place Mobile number

a         abc         123
b         def         234
c         ghi         345

(The above table is fetched from mysql db)

if the user clicks on the 3rd Row then the data such as name place and mobile number should be displayed in 3 different tags as shown below

Name: c
Place: ghi
Mobile: 345

thanks in advance

Before i used to have a button on the right side of each row with the "Name"(if it is a row of c then the button has c) on it so i dressed the button by a pic using CSS.

here goes the code i used

  <form action="Options2" method="post">
 <table id="sorter" class="sortable" id="example" class="pretty">
 <tr>
<th>Book Id</th>
<th>Title</th>
<th>Author</th>
<th>Category</th>
<th>Status</th>            
<th>Owner</th>
<th>Borrow Date</th>
<th>Return Date</th>
<th>Requested By</th>
<th>Actions</th>            
</tr>
<%
ArrayList  rs=(ArrayList)request.getAttribute("news");
ListIterator itr=rs.listIterator();
int i=1;

while( itr.hasNext()){ 
%> 
<tr> 
<td><%=itr.next()%></td> 
<% int Id = itr.nextIndex(); %>
<td><%=itr.next()%></td>    
<td><%=itr.next()%></td> 
<td><%=itr.next()%></td> 
<% int Id2 = itr.nextIndex(); %>
<td><%=itr.next()%></td> 
<td><%=itr.next()%></td> 
<td><%=itr.next()%></td> 
<td><%=itr.next()%></td>
<td><%=itr.next()%></td>
<% 
String Bname=rs.get(Id).toString();
System.out.println(Bname); 
String Stat=rs.get(Id2).toString();
System.out.println(Stat); 
if(!Stat.equals("Not Availible"))
{
%>
<td>
<input class="buttonir" type="Submit" name="X" value="<%=Bname %>"></td>
</tr>
<% 
}
}
%>
</table>

</form>

Answer 1

Try this:

$('table tr').click(function () {
    var BookId = $(this).children('td:eq(0)').html();
    var Title = $(this).children('td:eq(1)').html();
    var Author = $(this).children('td:eq(2)').html();

    $('div').html(
        'Book Id: ' + BookId + '<br />' +
        'Title: ' + Title + '<br />' + 
        'Author:' + Author + '<br />'
    );
});       

Demo: http://jsfiddle.net/UPxB9/1/

Answer 2

Compare it with your Code its almost same just few changes mentioned

Only following function is added in your code and two lines more which are highlighted out of code

Edit Add following function in your (already working) javascript tag on this page or in a js file which you are using in this page

function displayRowData(yourRow)
{
   var dv=document.getElementById('yourDivId');
   dv.innerHTML="<br>Name : "+ yourRow.children[0].innerHTML";
   dv.innerHTML += "<br>Place: "+yourRow.children[1].innerHTML";
   dv.innerHTML += "<br>Name : "+yourRow.children[2].innerHTML";
}

<form action="Options2" method="post">
 <table id="sorter" class="sortable" id="example" class="pretty">
 <tr>
<th>Book Id</th>
<th>Title</th>
<th>Author</th>
<th>Category</th>
<th>Status</th>            
<th>Owner</th>
<th>Borrow Date</th>
<th>Return Date</th>
<th>Requested By</th>
<th>Actions</th>            
</tr>
<%
ArrayList  rs=(ArrayList)request.getAttribute("news");
ListIterator itr=rs.listIterator();
int i=1;

while( itr.hasNext()){ 
%>

Following Line is just modified it was already in your code

<tr onclick='displayRowData(this)'> 

<td><%=itr.next()%></td> 
<% int Id = itr.nextIndex(); %>
<td><%=itr.next()%></td>    
<td><%=itr.next()%></td> 
<td><%=itr.next()%></td> 
<% int Id2 = itr.nextIndex(); %>
<td><%=itr.next()%></td> 
<td><%=itr.next()%></td> 
<td><%=itr.next()%></td> 
<td><%=itr.next()%></td>
<td><%=itr.next()%></td>
<% 
String Bname=rs.get(Id).toString();
System.out.println(Bname); 
String Stat=rs.get(Id2).toString();
System.out.println(Stat); 
if(!Stat.equals("Not Availible"))
{
%>
<td>
<input class="buttonir" type="Submit" name="X" value="<%=Bname %>"></td>
</tr>
<% 
}
}
%>
</table>

Following line is added to your code

<div id='yourDivId'></div>
</form>