Таблица 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

Каждый идентификатор должен быть уникальным в html, это ограничение, которое устанавливает html.Таким образом, вы должны добавить некоторый уникальный идентификатор к идентификаторам, т.е.people.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) вернет первый элемент в dom с указанным идентификатором (первая строка вашей таблицы).
Вы можете попробовать

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

и вместо этого обратитесь к элементу "this". как:

var pname = this.pname;

или

var pname = this.pname.innetHTML;

в JavaScript. и посмотрите, вернет ли это правую строку таблицы