JSP-JSTLテーブルは、HTML、Java、Javascript、JSP、およびJSTLの新機能であるテーブル

Question

の最初の行のみを選択します。

JSTLをタグライブラリとして使用する単純なJSPページがあります。私が得ることができるすべてをクリックして行のすべての値を取得するためにjavascriptを使用したときに、第2行、第3行または第n行をクリックしても、最初の行の値があります。私はクリックした行だけを取得したい。私はJavaScriptで

：

<script type="text/javascript" > 
function getTblContents() { 
var pName = document.getElementById("pName").innerHTML; 
var pAddress = document.getElementById("pAddress").innerHTML; 
var pEmail = document.getElementById("pEmail").innerHTML; 

alert(pName + " " + pAddress + " " + pEmail); 
} 
</script> 

私のJSTLコード：

<c:forEach var="people" items="${people.data}" varStatus="status"> 
<tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'" onclick="getTblContents();" > 
    <td id="pName" >${people.name}</td> 
    <td id="pAddress" >${people.address}</td> 
    <td id="pEmail" >${people.email}</td> 
</tr> 
</c:forEach> 

JavaScriptとJSPは、同じページ上にあります。

助けてください。前もって感謝します。

Answer 1

すべてのIDはhtmlで一意でなければなりません。したがって、IDに ユニーク識別子を追加する必要があります。 people.idとそのidをjavascript関数に渡します。

<script type="text/javascript" > 
    function getTblContents(id) { 
     var pName = document.getElementById("pName-"+id).innerHTML; 
     var pAddress = document.getElementById("pAddress-"+id).innerHTML; 
     var pEmail = document.getElementById("pEmail-"+id).innerHTML; 

     alert(pName + " " + pAddress + " " + pEmail); 
    } 
</script> 


<c:forEach var="people" items="${people.data}" varStatus="status"> 
     <tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'" onclick="getTblContents('${people.id}');" > 
      <td id="pName-${people.id}" >${people.name}</td> 
      <td id="pAddress-${people.id}" >${people.address}</td> 
      <td id="pEmail-${people.id}" >${people.email}</td> 
     </tr> 
</c:forEach> 

Answer 2

document.getElementById（$ ID）は、指定されたid（テーブルの最初の行）を持つdomの最初の要素を返します。
あなたは

<tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'" onclick="getTblContents(this);" > 

を試みることができるし、代わりに「この」要素を参照してください。以下のような：

var pname = this.pname; 

またはJavaScriptで

var pname = this.pname.innetHTML; 

。それがテーブルの右の行を返すかどうかを確認してください。