JSP-JSTL表格仅选择表格的第一行

Question

对于HTML，Java，Javascript，JSP和JSTL而言，它们都是新的。

我有一个简单的JSP页面，使用JSTL作为我的标签库。当我使用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中必须是唯一的，它是html设置的限制。所以你应该添加一些 唯一标识符到id即ie。 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; 

或

var pname = this.pname.innetHTML; 

在JavaScript

。看看是否返回表中的右边那一行