[英]Copy value from one textbox to another with jQuery in multiple gridview rows
I have a grid view that the user can add 1 or more rows to at a time. 我有一个网格视图,用户可以一次添加1行或更多行。 I need to copy the begin date to the end date textbox if the end date textbox is empty. 如果结束日期文本框为空,则需要将开始日期复制到结束日期文本框。 I have this working if the grid was empty when the rows are added, but I can't figure out how to do this when later adding rows to the grid. 如果在添加行时网格为空,则可以使用此方法,但是稍后在向网格中添加行时,我不知道如何执行此操作。
This is because I may only have two rows with textboxes so the array of them only has 2 entries, but my row index might indicate this is the 6th row. 这是因为我可能只有两行带有文本框,所以它们的数组只有2个条目,但是我的行索引可能表明这是第六行。 I can't figure out how to determine what textbox is being used so I can copy to the end date textbox in the same row. 我不知道如何确定正在使用哪个文本框,因此可以将其复制到同一行的结束日期文本框。
GridView 网格视图
<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>
<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>
<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 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"))
});
Update 更新
Changing the jquery to the much simpler below worked for new records and adding to existing ones. 将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()
});
If you have the begindate
element, you should be able to access the enddate
element with the following steps: 如果您具有begindate
元素,则应该可以通过以下步骤访问enddate
元素:
I'm not sure, but it would be something like this: 我不确定,但是会是这样的:
var txtEnd = $(begindateElement).closest("tr").find('input:text[id$="txtEndDate"]');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.