Question

我使用jstl foreach循环将数据列表显示为表。单击一行，行中相应的ID值需要发送到jquery onclick（）函数。表 -

  <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到jquery显示的表中传递行ID

2 个答案: