Question

Im new to HTML, Java, Javascript, JSP, and JSTL.

I have a simple JSP page using JSTL as my tag library. When I used javascript to get all the values of the a row by clicking all I can get are the values of the first row even when I click the 2nd, 3rd, or nth row. I want to get only the row I clicked.

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

my jstl code:

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

the javascript and jsp are on the same page.

Please help. Thanks in advance.

Answer 1

Every id must be unique in html, it is restriction that html sets. So you should add some
uniqe identifier to ids ie. people.id and past that id to javascript function.

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