jQuery日期格式不适用于表列

Question

我从数据库中的数据填充表格如下。

<tbody>
    <c:forEach items="${requestScope.expenses}" var="expense">
        <tr>
            <td style="width: 5%;"><a
                href="expense_manage?expense_id=${expense.expenseId}"
                class="btn btn-outline btn-primary">Edit</a></td>
            <td id="date">${expense.expenseDate}</td>
            <td>${expense.expenseDesc}</td>
            <td>${expense.expenseAmount}</td>
            <td>${expense.comment}</td>
            <td style="width: 10%;">
                <button type="button"
                    onclick="ConfirmDelete('id=${expense.expenseId}','removeExpense')"
                    class="btn btn-outline btn-danger">Delete</button></td>
        </tr>
    </c:forEach>
</tbody>

我需要将上表中的日期显示格式设为yyyy-MM-dd。所以我加了这个。

<script src="js/jquery-dateFormat.min.js"></script>

    <script>    
        jQuery(function() {
            var shortDateFormat = 'yyyy-MM-dd';

            jQuery("#date").each(
                    function(idx, elem) {
                        if (jQuery(elem).is(":input")) {
                            jQuery(elem).val(
                                    jQuery.format.date(jQuery(elem).val(),
                                            shortDateFormat));
                        } else {
                            jQuery(elem).text(
                                    jQuery.format.date(jQuery(elem).text(),
                                            shortDateFormat));
                        }
                    });
        });
    </script>

但它只改变第一行的日期。其他人没有改变。

我该如何解决这个问题？

Answer 1

该ID在文档中是唯一的。要对元素进行分组，请使用类。

替换

<td id="date">${expense.expenseDate}</td>

通过

<td class="date">${expense.expenseDate}</td>

并替换

jQuery("#date").each(

通过

jQuery(".date").each(