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

それをあなたのコードと比較してください。ほとんど同じですが、いくつかの変更が言及されています

次の関数のみがコードに追加され、コードから強調表示されている 2 行以上が追加されます

編集 このページの（すでに機能している）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 に答える