javascript - 日期选择器仅适用于第一行

Question

我正在使用 HTML 表格来显示数据集。我有一个日期字段单元格(使用输入类型='文本')。用户可以在运行时编辑日期。但每当我编辑日期时，它只会影响 HTML 表格的第一行。你能请任何人帮助我吗？我在服务器端 (ASPX) 创建了表。

我在服务器端页面中开发了以下代码。 (例如:Sample.aspx.cs)

 sbr.Append("<table class ='gstd' style='WIDTH: 98%; BORDER-COLLAPSE: collapse;' id='tblHistory'> <tbody><TR style='POSITION: relative; TOP: 14%; ; TOP: expression(this.offsetParent.scrollTop - 2)'> ")
        sbr.Append("<TD align=center Class='ghdr'  style='width:4%;'> Select</TD>")
        sbr.Append("<TD align=center Class='ghdr'  style='width:10%;text-decoration: underline;'> Equipment No</TD>")
        sbr.Append("<TD align=center Class='ghdr' style='width:8%;text-decoration: underline;'> Repair Company</TD>")
        **sbr.Append("<TD align=center Class='ghdr' style='width:8%;text-decoration: underline;'> Date</TD>")**
        sbr.Append("<TD align=center Class='ghdr' style='width:10%;text-decoration: underline;'> Pool</TD>")
        sbr.Append("<TD align=center Class='ghdr' style='width:8%;text-decoration: underline;'> Local Amount</TD>")
        sbr.Append("<TD align=center Class='ghdr' style='width:6%;text-decoration: underline;'> CUR</TD>")
        sbr.Append("<TD align=center Class='ghdr' style='width:8%;text-decoration: underline;'> Original Amount</TD>")
        sbr.Append("<TD align=center Class='ghdr' style='width:8%;text-decoration: underline;'> Amount in USD</TD>")
        sbr.Append("<TD align=center Class='ghdr' style='width:4%;text-decoration: underline;'> Country</TD>")
        sbr.Append("<TD align=center Class='ghdr' style='width:10%;text-decoration: underline;'> Organization</TD>")
        sbr.Append("<TD align=center Class='ghdr' style='width:12%;text-decoration: underline;'> Reason</TD>")
        sbr.Append("</TR>")
        For Each drUser As DataRow In dtContainerHistory.Rows
            sbr.Append("<TR class='gitem'><TD align=left class='gitem'> <input type='checkbox' id='chkSelect' onclick='getRowItem(this)' />")
            sbr.Append("</TD><TD align=left class='gitem'>")
            sbr.Append(drUser.Item("EQPMNT_NO"))
            sbr.Append("</TD><TD align=left class='gitem'>")
            sbr.Append(drUser.Item("RPR_CMPNY_SHRT_NAM"))
            sbr.Append("</TD><TD> ")
            **sbr.Append("<input type='text' id='txtRepairedDate' class='datepicker' value=""" & drUser.Item("RPR_CMPLT_DT") & """ style='width:90px;' />")**
            sbr.Append("</TD><TD align=left class='gitem'>")
            sbr.Append(drUser.Item("PL_SHRT_NAM"))
            sbr.Append("</TD><TD align=right class='gitem'>")
            sbr.Append(drUser.Item("APPRVL_AMNT"))
            sbr.Append("</TD><TD align=left class='gitem'>")
            sbr.Append(drUser.Item("CRRNCY_CD"))
            sbr.Append("</TD><TD align=right class='gitem'>")
            sbr.Append(drUser.Item("ORGNL_ESTMT_AMNT"))
            sbr.Append("</TD><TD align=right class='gitem'>")
            sbr.Append(drUser.Item("AMNT_IN_BS_CRRNCY"))
            sbr.Append("</TD><TD align=left class='gitem'>")
            sbr.Append(drUser.Item("CNTRY_CD"))
            sbr.Append("</TD><TD align=left class='gitem'>")
            sbr.Append(drUser.Item("ORGNZTN_SHRT_NAM"))
            sbr.Append("</TD><TD align=left class='gitem'>")
            sbr.Append(drUser.Item("DCSN_RSN_VC"))
            sbr.Append("</TD>")
            sbr.Append("</TR>")
        Next

我在设计页面中放置了以下代码。

 $(document).ready(function () {
         $("[name^=dtPicker]").datepicker({      
            showOn: 'button',
            dateFormat: 'dd-MM-yy',
            buttonImageOnly: true,
            buttonImage: 'http://localhost/testUI/images/calendar.png'
        });
    });

Answer 1

经过这里的大量讨论，我找到了解决方案。如果您有同样的问题，请将您的“id”或“name”或“class”替换为“type”，如下所示:

旧代码:

  $(document).ready(function () {
             **$("[name^=dtPicker]").datepicker({**      
                showOn: 'button',
                dateFormat: 'dd-MM-yy',
                buttonImageOnly: true,
                buttonImage: 'http://localhost/localUI//images/calendar.png'
            });
        });

新代码(解决方案):

$(document).ready(function () {
            **$("[type$=text]").datepicker({**
                showOn: 'button',
                dateFormat: 'dd-MM-yy',
                buttonImageOnly: true,
                buttonImage: 'http://localhost/localUI//images/calendar.png'
            });
        });