日期选择器仅适用于第一行答案

【问题标题】：Date Picker Works for First Row only日期选择器仅适用于第一行
【发布时间】：2016-09-09 04:42:38
【问题描述】：

我正在使用 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'
        });
    });

【问题讨论】：

您的意思是说我必须使用您在上面给出的代码，而不是我在上面提到的代码（以下代码我放在设计页面中。）部分。
我根据您的建议修改了代码。 $(document).ready(function () { $(".datepicker").datepicker({ showOn: 'button', dateFormat: 'dd-MM-yy', buttonImageOnly: true, buttonImage: 'localhost/localUI//images/calendar.png' } ); });但仍然存在同样的问题
问题中的代码都没有匹配name^=dtPicker - 如果它在第一行有效，那么您正在做的事情不包括在问题中。您还有大量显然与问题无关的代码。请阅读此内容，所有 3 个因素都适用于此处：stackoverflow.com/help/mcve
嗨对不起，我错过了添加我的代码。你是对的。我可以用 id=txtRepairedDate 替换 name=dtpicker。我尝试了姓名、身份证和班级。但没有任何帮助。你能告诉我你对我的问题有什么期望吗？我在上面提到的代码都是我在我的页面中使用的。
简单地说，每个id在页面上应该是唯一的。从代码中不相关的部分开始，看起来 每一行 行都有 id=txtRepairedDate，这是无效的 HTML，如果您将其用作选择器，你会得到第一个。基本上，在您的设置中使用$(".datepicker")。删除不相关的代码并输入您使用的实际代码，您可能会得到一个不错的答案。

标签： javascript jquery html rows

【解决方案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'
            });
        });

【讨论】：