Java JSP-JSTL表只选择表的第一行

我不熟悉HTML、Java、Javascript、JSP和JSTL

我有一个简单的JSP页面，使用JSTL作为标记库。当我使用javascript通过单击获取一行的所有值时，即使单击第二行、第三行或第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>

函数getTblContents（）{
var pName=document.getElementById（“pName”）.innerHTML；
var pAddress=document.getElementById（“pAddress”）.innerHTML；
var pEmail=document.getElementById（“pEmail”）.innerHTML；
警报（pName+“”+pAddress+“”+pEmail）；
}

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

${people.name}
${people.address}
${people.email}

javascript和jsp位于同一页面上

---

请帮忙。提前感谢。

文档。getElementById（$ID）将返回dom中具有指定ID的第一个元素（表的第一行）。
你可以试试

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

或

---

在javascript中。看看是否返回表的右行，每个id在html中都必须是唯一的，这是html设置的限制。所以你应该加一些 将uniqe标识符转换为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>

函数getTblContents（id）{
var pName=document.getElementById（“pName-”+id）.innerHTML；
var pAddress=document.getElementById（“pAddress-”+id）.innerHTML；
var pEmail=document.getElementById（“pEmail-”+id）.innerHTML；
警报（pName+“”+pAddress+“”+pEmail）；
}
${people.name}
${people.address}
${people.email}

var pname = this.pname.innetHTML;

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