1

これは状況です。DB の結果に従って動的に生成されるテーブルがあり、JQuery を使用して表示されるカレンダー付きの入力フィールドがあります。たとえば、3行目の日付では、最初の行の値が変更されることがわかります。

私のJQuery関数ではIDではなくElementByClassを取得するため、これが起こっていると思います.

どうやってやるの？

コードに従う：

<table border ="1">
                <tr>
                    <th>Project name</th>
                    <th>Project Description</th>
                    <th>Customer for this project</th>
                    <th>Project Amount</th>
                    <th>Project Start Date</th>
                    <th>Project End Date</th>
                    <th>Payment Method</th>
                    <th>Payment Action</th>


                </tr>
               <c:forEach items="${cpayments}" var="payment" >

                   <tr>
                    <form method="post" action="myController" onSubmit="return confirm('are you sure you want to update this record?')">
                        <td><input value="${payment.getPaymentId().getMyproject().getProjectName()}" name="projectNameEdit"/></td>
                        <td><input value="${payment.getPaymentId().getMyproject().getProjectDescription()}" name="projectDescriptionEdit"/></td>
                        <td><input value="${payment.getPaymentId().getMyproject().getFkCustomer().getCustomerName()}" name="customerNameEdit"/></td>

                        <td><input value="${payment.amount}" name="amount"/></td> 
                        <fmt:formatDate value="${payment.getPaymentId().getPaymentDate()}" 
                        type="date" 
                         pattern="MM-dd-yyyy"
                             var="theFormattedStartDate" />
                        <fmt:formatDate value="${payment.paymentExpire}"  
                        type="date" 
                         pattern="MM-dd-yyyy"
                             var="theFormattedExpireDate" />
                        <td><input value="${theFormattedStartDate}" id="payment_date" name="startDate" class="datepicker"/></td>
                        <td><input value="${theFormattedExpireDate}"   id="paymentToDate" name="endDate" class="datepicker"/></td>
                        <td><input value="${payment.paymentMethod}" name="paymentMethod" /></td>
                        <td><input value="${payment.getPaymentId().getMyaction().getActionName()}" name="paymentAction"/></td>
                        <td><input  name="edit" type="submit" value="Edit" style="background-color:green;font-weight:bold;color:white;" ></td>
                         <td><input  name="edit" type="submit" value="Delete" style="background-color:red;font-weight:bold;color:white;" ></td>
                         <input type="hidden" name="<%=WebParamsList.FROMPAGE%>" value="resultPage">


                       <input type="hidden" name="actionIdForEdit" value="${payment.getPaymentId().getMyaction().getActionId()}"> 
                       <input type="hidden" name="projectIdForEdit" value="${payment.getPaymentId().getMyproject().getProjectId()}">
                        <input type="hidden" name="<%=WebParamsList.ACTION_NAME%>" value="editProject">
                    </tr>
                    </form>



               </c:forEach>
            </table>

<script>

            $(document).ready(function() {
                $(".datepicker").datepicker();
            });


    </script>
4

1 に答える 1

1

各 td の動的 ID を生成するには、c:forEach ループで属性 varStatus="status" を設定します。

datePicker と同じ名前が問題です。各 datePicker の動的 ID を作成する必要があります。

以下は、変更されたコードです。

 <c:forEach items="${cpayments}" var="payment" varStatus="status">

                   <tr>
                    <form method="post" action="myController" onSubmit="return confirm('are you sure you want to update this record?')">
                        <td><input value="${payment.getPaymentId().getMyproject().getProjectName()}" name="projectNameEdit"/></td>
                        <td><input value="${payment.getPaymentId().getMyproject().getProjectDescription()}" name="projectDescriptionEdit"/></td>
                        <td><input value="${payment.getPaymentId().getMyproject().getFkCustomer().getCustomerName()}" name="customerNameEdit"/></td>

                        <td><input value="${payment.amount}" name="amount"/></td> 
                        <fmt:formatDate value="${payment.getPaymentId().getPaymentDate()}" 
                        type="date" 
                         pattern="MM-dd-yyyy"
                             var="theFormattedStartDate" />
                        <fmt:formatDate value="${payment.paymentExpire}"  
                        type="date" 
                         pattern="MM-dd-yyyy"
                             var="theFormattedExpireDate" />
                        <td><input value="${theFormattedStartDate}" id="payment_date${status.index}" name="startDate${status.index}" class="datepicker"/></td>
                        <td><input  value="${theFormattedExpireDate}"   id="paymentToDate${status.index}" name="endDate${status.index}" class="datepicker"/></td>
                        <td><input value="${payment.paymentMethod}" name="paymentMethod" /></td>
                        <td><input value="${payment.getPaymentId().getMyaction().getActionName()}" name="paymentAction"/></td>
                        <td><input  name="edit" type="submit" value="Edit" style="background-color:green;font-weight:bold;color:white;" ></td>
                         <td><input  name="edit" type="submit" value="Delete" style="background-color:red;font-weight:bold;color:white;" ></td>
                         <input type="hidden" name="<%=WebParamsList.FROMPAGE%>" value="resultPage">


                       <input type="hidden" name="actionIdForEdit" value="${payment.getPaymentId().getMyaction().getActionId()}"> 
                       <input type="hidden" name="projectIdForEdit" value="${payment.getPaymentId().getMyproject().getProjectId()}">
                        <input type="hidden" name="<%=WebParamsList.ACTION_NAME%>" value="editProject">
                    </tr>
                    </form>



               </c:forEach>

そして、あなたのjQueryセレクターは

$("[id^=payment_date]").datepicker();
$("[id^=paymentToDate]").datepicker();
于 2013-08-22T11:04:32.570 に答える