Java 使用'&书信电报；tr onclick=alertContents（）>'；

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

姓名地点手机号码

a         abc         123
b         def         234
c         ghi         345

（上表取自mysql数据库）

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

Name: c
Place: ghi
Mobile: 345

提前谢谢

以前我在每一行的右边都有一个按钮，上面写着“Name”（如果它是一行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>

书号
标题
作者
类别
地位
所有者
借用日期
返回日期
请求
行动

试试这个：

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

$（'table tr'）。单击（函数（）{
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(
'图书Id:'+BookId+'
'+
'标题：'+Title+'
'+
'作者：'+作者+'
'
);
});       

---

演示：

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

代码中只添加了以下函数，还有两行在代码外突出显示

编辑 在此页面上的（已经工作的）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()){ 
%>

函数显示行数据（yourRow）
{
var dv=document.getElementById（'yourDivId'）；
dv.innerHTML=“
名称：”+yourRow.children[0].innerHTML”；
dv.innerHTML+=“
位置：“+yourRow.children[1].innerHTML”；
dv.innerHTML+=“
名称：“+yourRow.children[2].innerHTML”；
}
书号
标题
作者
类别
地位
所有者
借用日期
返回日期
请求
行动

下一行刚刚被修改，它已经在您的代码中了

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

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

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

也许你可以在实现上传播你的想法，这样我们就可以发表评论，而不是期待outsideOh提供解决方案，我忘了提到..这实际上是关于HTML/JS的，你在Java/JSP中的做法与ASP或PHP或..换句话说，除了这些技术之外，这与Java/JSP完全无关（据推测）生成HTML。@AndrewThompson我只是编辑了我的代码来展示我以前是如何使用它的。似乎没有什么可以像@Trini所尝试的那样尝试。如果Trini告诉了他的谷歌搜索，评论员会很好地指导他，而不是告诉他解决方案，那就更好了。Trini你是来听我说的，这样我就可以指导一些事情吗@萨米亚克拉姆：是的，我在这里，我在倾听并引导我：）谢谢：“代码编写者很棒的工作。你能用简单的JavaScript来告诉它吗？我怀疑J-Quices使用DIV.InEnHTML不是很熟悉，而不是追加。我想这就是TrII需要的，我会看到它是如何用J-Que::”SAMIAKRAM：普通的JavaScript代码会有点冗长，因为我们需要考虑不同的浏览器依赖。s、 Jquery解决了这个问题。因此，只要从Jquery.com下载Jquery.js并将其包含在您的页面中，就可以使上述代码正常工作。现在，我的答案只有一个原因可以被接受哈哈哈。那就是如果Trimi在那里，而且他会像我一样老：）否则，您做得很准确，我之前没有在末尾添加div。您可以在其中看到您的结果displayRowData函数中的一些错误已被删除。如果您想了解innerHTML，我也可以告诉您。@codeformer抱歉，伙计们，这两个代码对我都不起作用：（可能是因为我在同一代码中使用了大量外部java脚本文件来对表进行排序（不知道确切原因）还有其他方法吗？如果你有，肯定有方法。只有你才能完全停止。如果你剩下的程序对你来说运行良好。是否显示RowData（yourRow）{alert（1）；//保持剩下的代码不变，如果你没有得到alert，请告诉我。}