Question

我使用jsp和java从mysql数据库中获取并显示数据作为html中的表格现在我想要的是当用户点击特定行时，该行中的数据应该填充在3个不同的标签中例如，如果我的表有这个数据

名称放置手机号码

a         abc         123
b         def         234
c         ghi         345

（上表是从mysql db获取的）

如果用户点击第3行，则名称位置和手机号码等数据应显示在3个不同的标签中，如下所示

Name: c
Place: ghi
Mobile: 345

提前致谢

在我以前在每一行的右侧都有一个按钮时，＆＃34;名称＆＃34;（如果它是一行c，那么按钮有c），所以我把按钮按了一个使用CSS的图片。

这里是我使用的代码

  <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

试试这个：

$('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 />'
    );
});

演示：http://jsfiddle.net/UPxB9/1/

Answer 2

将它与您的代码进行比较，几乎只提到了一些变化

在您的代码中只添加了以下功能，并且在代码中突出显示了两行以上的功能

修改在此页面上或您在此页面中使用的js文件中的（已在工作的）javascript标记中添加以下功能

使用''从HTML表中获取行的内容

2 个答案: