Question

我有一组隐藏的字段，它们的名称只是附加了一个索引计数器。然后我有一个函数需要遍历所有隐藏的字段并提醒值。

如果它是一个普通的文本字段，我可以很容易地做到这一点并且工作正常：

        <c:forEach items="${ctsDictionary}" var="cts" varStatus="status">
            <c:set var="summCtr" value="${summCtr + 1}" scope="page"/>
            <input type="text" id="currClock<c:out value='${summCtr}'/>" name="currClock<c:out value='${summCtr}'/>" value="<c:out value='${cts.value.clock_no}'/>" />              
        </c:forEach>        


        $('input[name*="currClock"]').each(function() {
              alert($(this).val());
        });

但是当我将它转换为隐藏字段并选择它们时，如下所示，它不起作用。它不是循环的。有什么想法吗？

        <c:forEach items="${ctsDictionary}" var="cts" varStatus="status">
            <c:set var="summCtr" value="${summCtr + 1}" scope="page"/>
            <input type="hidden" id="currClock<c:out value='${summCtr}'/>" name="currClock<c:out value='${summCtr}'/>" value="<c:out value='${cts.value.clock_no}'/>" />                
        </c:forEach>        


        $('input:hidden[name*="currClock"]').each(function() {
              alert($(this).val());
        });

更新：正如Yuriy指出的那样，它正在jsfiddle中工作。但对于我的生活，我无法弄清楚为什么它不能在我的JSP中工作。我甚至硬编码隐藏字段与jsfiddle完全相同，但它仍然没有选择。我发布了我的整个JSP，希望有一个好眼睛的人可以发现什么是错的。 jQuery选择发生在getCrewDetails（）函数中。

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

<DIV id="approveCrewSummListDiv" class="normalFont" style="height:360px;">

<table id="approveCrewSummTable" class="display">
    <thead>
        <tr class="ui-widget-header" style="color:#FFFFFF;">
            <th>Status</th>
            <th>Clock No</th>
            <th>Name</th>
            <th>First Clock In</th>
            <th>Last Clock Out</th>
            <th>Total Approved</th>
        </tr>
    </thead>
    <tbody>

        <c:set var="summCtr" value="0" scope="page" />

        <c:forEach items="${ctsDictionary}" var="cts" varStatus="status">

            <c:set var="summCtr" value="${summCtr + 1}" scope="page"/>

            <input type="hidden" id="prevClock<c:out value='${summCtr}'/>" name="prevClock<c:out value='${summCtr}'/>" value="<c:out value='${ctsDictionary[status.index-1].clock_no}'/>" />
            <input type="hidden" id="currClock<c:out value='${summCtr}'/>" name="currClock<c:out value='${summCtr}'/>" value="<c:out value='${cts.value.clock_no}'/>" />
            <input type="hidden" id="nextClock<c:out value='${summCtr}'/>" name="nextClock<c:out value='${summCtr}'/>" value="<c:out value='${ctsDictionary[status.index+1].clock_no}'/>" />                

            <tr id="<c:out value='${cts.value.clock_no}'/>" onclick="getCrewDetails(this.id); return false;"  >
                <td align="center"><c:out value='${cts.value.approval}'/></td>
                <td align="center"><c:out value='${cts.value.clock_no}'/></td>
                <td align="center"><c:out value='${cts.value.employeeName}'/></td>
                <td align="center"><c:out value='${cts.value.mod_start_date_timStr}'/></td>
                <td align="center"><c:out value='${cts.value.mod_end_date_timeStr}'/></td>
                <td align="center"><c:out value='${cts.value.mod_elap_timeStr}'/></td>
            </tr>   

        </c:forEach>        

    </tbody>
</table>


<script>

    $(document).ready(function() {    

        //Datatable transform
        $('#approveCrewSummTable').dataTable( {        
            "paging":   true,   //enables paging functionality
            "autoWidth": false, //stops DataTable glitch that sets table width that exceeds DIV container
            "deferRender": true, //defers rendering for performance enhancement or so the API says
            "displayLength": 8, //set the number of records displayed per page
            "lengthChange": false, //do not show option for changing no. of entries displayed
            "order": [[ 2, "asc" ]] //default initial sort by name ASC  
            //"ordering": true,        
            //"info":     true
        });

        //Pop-up dialog window that will contain the seleted crew's details         
        $( "#approveCrewDetDiv" ).dialog({
              //title: $(this).attr("data-dialog-title"),
              closeOnEscape: true,
              draggable: false,
              //position: 'center',
              width: 975,
              height: 610, //'auto',
              modal: true,
              resizable: false,
              autoOpen: false,
              open: function (event, ui) {
                //$('#approveCrewDetDiv').css('overflow', 'hidden'); //hide scroll bars
              }
              //close: function () { $(this).remove() }
        });     
    });

    function getCrewDetails(clockNo){
        //alert("Getting crew details for clockNo: " + clockNo);

        //Get previous and next clock nos with reference to selected clock no           
        var ctr = 1;
        var prevClockNo = 0;
        var nextClockNo = 0;
        $('input:hidden[name*="currClock"]').each(function() {
           alert("VAL:"+$(this).val());  //THIS IS NOT ALERTING, SO IT'S NOT LOOPING
           if (($(this).val()) == clockNo){
                prevClockNo = $('#prevClock'+ctr).val();
                nextClockNo = $('#nextClock'+ctr).val();
           }
           ctr++;
        });

        //Open crew details pop-up
        $( "#approveCrewDetDiv" ).dialog("open");

        //Get data for crew details pop-up
        $.get(  "ApprovalController",
                { 
                    faction: 'getCrewDetails',
                    pltNo: $('#pltNoHid').val(),
                    acPayDate: $( "#acPayDate" ).val(),
                    shift: $('#acShiftDD').val(),
                    clockNo: clockNo,
                    prevClockNo: prevClockNo,
                    nextClockNo: nextClockNo,
                    beforeSend: function() {  //Show AJAX wait icon
                        //$('#approveCrewDetWrapperDiv').show();  //Make target wrapper DIV visible
                        $('#approveCrewDetDiv').load('AJAXLoading.jsp'); //Load the AJAX wait page to the target DIV
                    }                       
                },
                function(data,status){
                    //alert("Data: " + data + "\nStatus: " + status);
                    //$.each(data, function(i, item){
                    //  alert("Data: " + item.field + "=" + item.value);
                        //$("#"+item.field).val(item.value);
                    //});

                    //Populate crew details div
                    //$('#approveCrewDetDiv').replaceWith(data);  //this DIV is inside "dialog-modal" DIV inside ApproveCrew2.jsp
                    $('#approveCrewDetDiv').html(data);  //this DIV is inside "dialog-modal" DIV inside ApproveCrew2.jsp

                }
                //"json"
        );  
    }   

</script>

</DIV>

PARTIAL名称的HIDDEN字段选择器？

0 个答案: