Question

这种情况，我有一个表根据数据库的结果动态生成，我有一个输入字段，日历使用JQuery显示，我的问题是如果我有多行结果如果我改变了例如第3行中的日期值我看到要更改的第一行的值。

我猜这种情况正在发生，因为在我的JQuery函数中我得到的是ElementByClass而不是ID，所以我认为我必须找到一种方法来1）为每行/ td结果创建id然后2）为每一行调用JQUery函数。

我该怎么做？

遵循代码：

<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>

Answer 1

为了在c：forEach循环中为每个td put属性varStatus =“status”生成动态id。

与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 Selector应该是

$("[id^=payment_date]").datepicker();
$("[id^=paymentToDate]").datepicker();

使用JSP中的javascript动态创建id

1 个答案: