如何从jsp中的foreach循环访问Js中的多个td数据

Question

下面的jsp代码使用foreach循环并访问数组元素的每个对象。

...
<c:forEach var="empData" items="${employees}">
<tr> 
    <td><a href="#" id="nameId">${empData.name}</a></td>
    <td>${empData.age}</td>
</tr> 
</c:forEach>
...

我有一个单独的JS文件，其中包含以下代码段

$('#nameId').on('click', function(e) {
   //Here when I click on the hyper link of td, I should be able to access both name and age
})

那么，在js文件中，如何访问所选行的名称和年龄

Answer 1

您需要委托并且ID需要是唯一的，所以使用一个类

null

$("#tab1").on("click","a.nameId",function(e) {
  e.preventDefault()
  console.log(this.textContent,$(this).closest("td").next().text())
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tab1">
<tr> 
    <td><a href="#" class="nameId">John</a></td>
    <td>18</td>
</tr> 
<tr> 
    <td><a href="#" class="nameId">Fred</a></td>
    <td>19</td>
</tr> 

</table>