在单击行时将使用 jstl 显示的 table 中的行 ID 传递给 jquery

Question

我将数据列表显示为 table 使用 jstl foreach loop.On 单击一行，行中的相应 ID 值需要发送到 jquery onclick()功能。 Table-

  <table border="1" width="90%" class="table-hover" id="warehouseValue">

    <tr>
        <th>Warehouse Id</th>
        <th>Warehouse Location</th>
        <th>Warehouse City</th>
        <th>Zone</th>
    </tr>

     <c:forEach items="${sessionScope.listWarehouse}" var="description">
         <tr>        
            <td>
               <input type="hidden" id="idValue" value="${description.getWarehouseId()}" />
               ${description.getWarehouseId()}
            </td>
            <td>${description.getWarehouseLocation()}</td>
            <td>${description.getWarehouseCity()}</td>
            <td>${description.getWarehouseDescription().getZone()}</td>
        </tr>
     </c:forEach> 
</table>

Jquery onclick() 函数-

$(document).ready(function() {
   $("#warehouseValue").click(function() {
      var rowId = document.getElementById("idValue").value;
      alert("new "+rowId);
   });
});

在这里，点击任何一行，只会显示第一行的 id-${description.getWarehouseId()}。如何将每一行的相应 Id 值发送到 onclick() 函数

Answer 1

试试这个。我发表评论的时间太长了，但不要将其视为答案。

<tr>
    <th>Warehouse Id</th>
    <th>Warehouse Location</th>
    <th>Warehouse City</th>
    <th>Zone</th>
</tr>

 <c:forEach items="${sessionScope.listWarehouse}" var="description">
     <tr>        
        <td>
           <input type="hidden" class="id-input" id="idValue" value="${description.getWarehouseId()}" />
           ${description.getWarehouseId()}
        </td>
        <td>${description.getWarehouseLocation()}</td>
        <td>${description.getWarehouseCity()}</td>
        <td>${description.getWarehouseDescription().getZone()}</td>
    </tr>
 </c:forEach>

JQuery

$(document).ready(function() {
   $("#warehouseValue").on('click','tr',(function() {
   var $this = $(this);
   var rowID = $this.find('.id-input');      
      alert("new " + rowId);
   });
});

Answer 2

你可以这样。 td 有一个子输入元素。

$("#warehouseValue").on('click','td',function(event) {
        // td has a child input 
        var value1 = $(event.target.children[0]).val();
        var value2 = $(event.target).children("input").val();
        console.log(value1+" "+value2);
});

在单击行时将使用 jstl 显示的 table 中的行 ID 传递给 jquery

Pass row id in a table displayed using jstl to jquery on click of row

jquery

jsp

jstl