0

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

姓名 地点 手机号码

a         abc         123
b         def         234
c         ghi         345

（上表取自mysql db）

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

Name: c
Place: ghi
Mobile: 345

提前致谢

在我曾经在每行右侧有一个带有“名称”的按钮之前（如果它是一行 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>
4

2 回答 2

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/

于 2012-08-24T07:57:36.370 回答
0

将其与您的代码进行比较，它几乎相同，只是提到了一些更改

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

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

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()){ 
%>

以下行刚刚修改，它已经在您的代码中

<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>

将以下行添加到您的代码中

<div id='yourDivId'></div>
</form>
于 2012-08-24T08:53:30.190 回答