使用'从HTML表中提取行的内容<tr onclick=alertContents(）>'

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

本文关键字：onclick tr lt gt alertContents HTML 提取 使用      更新时间：2023-09-26

我使用jsp和java从mysqldb中提取数据并将其显示为html中的一个表，现在我想要的是当用户单击特定行时，该行中的数据应该填充在3个不同的标签中例如，如果我的表有这个数据

姓名地点手机号码

a         abc         123
b         def         234
c         ghi         345

（上表取自mysqldb）

如果用户点击第三行，则姓名、地点和手机号码等数据应显示在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 />'
    );
});

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

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

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

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

Following Line刚刚被修改，它已经在您的代码中了

<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>
相关文章：