如何從 JSP 到 JS 獲取嵌套 JSTL c:forEach 的索引

Question

我有一個 JSP，我在其中通過 JSTL c:forEach 循環顯示元素。 這是一個嵌套循環，如下所示：

<c:forEach items="${auditBudgetData.auditBudgetTierOneList}" var="auditBudgetTierOne" varStatus="tierOneCount">
        ** Some Code **     
    <c:forEach items="${auditBudgetTierOne.auditBudgetTierTwoList}" var="auditBudgetTierTwo" varStatus="tierTwoCount">
            ** Some Code ** 
                    <c:forEach items="${auditBudgetTierTwo.auditBudgetItemList}" var="auditBudgetItem" varStatus="budgetItemCount">
                        <input type="hidden" name="tierOneIndex" value="${tierOneCount.count}">
                        <input type="hidden" name="tierTwoIndex" value="${tierTwoCount.count}">
                        <input type="hidden" name="budgetItemIndex" value="${budgetItemCount.count}">

                            **Element rows displayed here**

現在，當用戶選擇最內層循環中的任何元素行時，我必須在 JS 中獲取值。 如您所見，我正在嘗試獲取每個嵌套循環的計數，如下所示：

<input type="hidden" name="tierOneIndex" value="${tierOneCount.count}">
<input type="hidden" name="tierTwoIndex" value="${tierTwoCount.count}">
<input type="hidden" name="budgetItemIndex" value="${budgetItemCount.count}">

並嘗試在 JS 中獲取輸入字段的值，如下所示：

var tierOneIndex = $('input[name="tierOneIndex"]').val();
var tierTwoIndex = $('input[name="tierTwoIndex"]').val();
var budgetItemIndex = $('input[name="budgetItemIndex"]').val();

但無論我選擇什么元素，我總是得到：

tierOneIndex = 0
tierTwoIndex = 0
budgetItemIndex = 0

任何想法如何獲取計數值。

Answer 1

在你的 html 你可以這樣做

<table>

    <c:forEach items="${auditBudgetData.auditBudgetTierOneList}" var="auditBudgetTierOne" varStatus="tierOneCount">
            ** Some Code **     
        <c:forEach items="${auditBudgetTierOne.auditBudgetTierTwoList}" var="auditBudgetTierTwo" varStatus="tierTwoCount">
                ** Some Code ** 
                        <c:forEach items="${auditBudgetTierTwo.auditBudgetItemList}" var="auditBudgetItem" varStatus="budgetItemCount">


                            <input type="hidden" name="tierOneIndex"    id="tierOneIndex_${budgetItemCount.index}"        value="${tierOneCount.count}">
                            <input type="hidden" name="tierTwoIndex"    id="tierTwoIndex_${budgetItemCount.index}"        value="${tierTwoCount.count}">
                            <input type="hidden" name="budgetItemIndex" id ="budgetItemIndex_${budgetItemCount.index}"    value="${budgetItemCount.count}">

                            <tr class="rows" id="${budgetItemCount.index}"><td>click Here</td></tr>


    </table>

在javascript中你可以這樣做

$(document).ready(function(){

$("tr.rows").click(function() {
    var rowid=this.id; 

var tierOneIndex = $('#tierOneIndex_'+rowid).val();
var tierTwoIndex = $('#tierTwoIndex_'+rowid).val();                         
var budgetItemIndex = $('#budgetItemIndex_'+rowid).val(); 

    console.log("tierOneIndex:"+tierOneIndex);
    console.log("tierTwoIndex:"+tierTwoIndex);
    console.log("budgetItemIndex:"+budgetItemIndex);
});

    }); 

筆記：

${tierOneCount.index}從 0 開始計數

${tierOneCount.count}從 1 開始計數

我也為您創建了一個示例小提琴http://jsfiddle.net/9CHEb/33/

Answer 2

類似方法

您將在此 StackOverflow 問答鏈接中找到一種方法。

解決方案

詳細地說，我會選擇這樣的東西（JSP）

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>

<script src="/*link to jQuery*/"></script>
<script>
   $(document).ready(function() {
       $("td").click(function(event) {
           var dtoItemIdx = $(this).attr("data");
           //alert("Selected idx: " + dtoItemIdx);
           console.info("Selected idx: " + dtoItemIdx);
       });
   });
</script>

<%-- Get the size of collection --%>
<c:set var="size" scope="page" value="${fn:length(dto.items)}" />
<c:out value="There are ${size} elements in the list." />

<table>
<c:forEach items="${dto.items}" var="item" varStatus="row">

    <tr><td data="${row.index}">
    <%-- Get the current index in the loop --%>
    <c:out value="Your content i.e [row idx: ${row.index}]." />
    </td></tr>

</c:forEach>
</table>

擴展

您顯然可以嵌套多個循環，而不是只有一個循環。 不同的索引可以存儲在類似 CSV 的結構中：

...<td data="${row.index};${product.index};${properties.index}">...

如果這不能解決您的問題，請發表評論。

Answer 3

如果提交了該頁面，如何在提交的頁面中訪問這些隱藏變量？ （請參閱一周前詢問的問題“在forEach循環中使用varStatus計數作為JSP變量的一部分來訪問JSTL變量”）