使用jQuery在多个gridview行中将值从一个文本框复制到另一个文本框

Posted 2023-04-13

【中文标题】使用jQuery在多个gridview行中将值从一个文本框复制到另一个文本框

【英文标题】：Copy value from one textbox to another with jQuery in multiple gridview rows

【发布时间】：2014-06-09 20:25:54

【问题描述】：

我有一个网格视图，用户可以一次添加 1 行或更多行。如果结束日期文本框为空，我需要将开始日期复制到结束日期文本框。如果添加行时网格为空，我可以使用此功能，但稍后将行添加到网格时我无法弄清楚如何执行此操作。

这是因为我可能只有两行带有文本框，所以它们的数组只有 2 个条目，但我的行索引可能表明这是第 6 行。我不知道如何确定正在使用的文本框，因此我可以复制到同一行中的结束日期文本框。

网格视图

<asp:GridView ID="gvOfferingDates" runat="server" 
    AutoGenerateColumns="False" 
    onrowdatabound="gvOfferingDates_RowDataBound" 
    onrowediting="gvOfferingDates_RowEditing" 
    onrowcancelingedit="gvOfferingDates_RowCancelingEdit" 
    onrowupdated="gvOfferingDates_RowUpdated" 
    onrowupdating="gvOfferingDates_RowUpdating" Width="100%" >
    <Columns>
        <asp:TemplateField>
            <HeaderStyle HorizontalAlign="Left" />
            <ItemTemplate>
                <asp:ImageButton ID="btnEdit" runat="server" CommandName="Edit" ImageUrl="~/Images/Edit.png" Visible='<%# !IsEditable(Eval("NewRow")) %>' />
                <asp:ImageButton ID="btnDelete" runat="server" CommandName="Delete" ImageUrl="~/Images/Delete.png" Visible='<%# IsEditable(Eval("NewRow")) %>' />
                <asp:ImageButton ID="btnCancel" runat="server" CommandName="Cancel" ImageUrl="~/Images/undo.png" CausesValidation="False" Visible='<%# EditMode %>' />--%>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Begin Date">
            <ItemTemplate>
                <asp:Label runat="server" ID="lblBeginDate" Text='<%# Eval("BeginDate", "0:MM/dd/yyyy") %>' Visible='<%# !IsEditable(Eval("NewRow")) %>'></asp:Label>
                <asp:Label runat="server" ID="lblBeginDateEdit" Text='<%# Eval("BeginDate", "0:MM/dd/yyyy") %>' Visible="false"></asp:Label>
                <asp:Label ID="lblBeginRequired" runat="server" Text="*" ForeColor="Red" Visible='<%# IsEditable(Eval("NewRow")) %>'></asp:Label>&nbsp;
                <asp:TextBox CssClass="begindate" ID="txtBeginDate" runat="server" Visible='<%# IsEditable(Eval("NewRow")) %>' BackColor="#FFFACD"></asp:TextBox>
            </ItemTemplate>

        </asp:TemplateField>
        <asp:TemplateField HeaderText="End Date">
            <ItemTemplate>
                <asp:Label runat="server" ID="lblEndDate" Text='<%# Eval("EndDate", "0:MM/dd/yyyy") %>' Visible='<%# !IsEditable(Eval("NewRow")) %>'></asp:Label>
                <asp:Label runat="server" ID="lblEndDateEdit" Text='<%# Eval("EndDate", "0:MM/dd/yyyy") %>' Visible="false"></asp:Label>
                <asp:Label ID="lblEndRequired" runat="server" Text="*" ForeColor="Red" Visible='<%# IsEditable(Eval("NewRow")) %>'></asp:Label>&nbsp;
                <asp:TextBox CssClass="enddate" ID="txtEndDate" runat="server" BackColor="#FFFACD" CausesValidation="True" Visible='<%# IsEditable(Eval("NewRow")) %>'></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

jQuery

$(document).ready(function() 
    $(".begindate").datepicker(
        onSelect: function(dateText, ui) 
            var bDate = $(this).val();
            var iRowIndex = $(this).closest("tr").prevAll("tr").length;
            var $arrT = $('#<%=gvOfferingDates.ClientID %>').find('input:text[id$="txtEndDate"]');
            var txtEnd = $($arrT[iRowIndex - 1]);


            if ($($txtEnd).val().length == 0) 
                $($txtEnd).val(bDate);
            
        ,
        changeMonth: true, changeYear: true, minDate: new Date()
    ).on("change", function() 
        $(this).blur()
    );

    $(".enddate").datepicker(
        onSelect: function() 
            minDate: new Date($(".begindate"))
        ,
        changeMonth: true, changeYear: true, minDate: new Date($(".begindate"))
    );

更新

将 jquery 更改为以下更简单的方式适用于新记录并添加到现有记录。

$(".begindate").datepicker(
    onSelect: function(dateText, ui) 
        var bDate = $(this).val();

        var txtEnd = $(this).closest("tr").find('input:text[id$="txtEndDate"]');
        if (txtEnd.val().length == 0) 
            txtEnd.val(bDate);
        

    ,
    changeMonth: true, changeYear: true, minDate: new Date()
).on("change", function() 
    $(this).blur()
);

【参考方案1】：

如果您有begindate 元素，您应该可以通过以下步骤访问enddate 元素：

获取最近的 TR 父元素。 在 TR 子元素中搜索带有 enddate id 的输入。两个文本框应位于同一表格行中。

我不确定，但应该是这样的：

 var txtEnd = $(begindateElement).closest("tr").find('input:text[id$="txtEndDate"]');

【讨论】：

谢谢！这是有效的：var txtEnd = $(this).closest("tr").find('input:text[id$="txtEndDate"]');