我在网格视图中的jquery模式内有关于textbox(tb)的问题。基本上,问题是tb的值与我点击gridview中其他行的模态相同,即使我把“tr”设置为行。关键是'id_rN'和'rN'。情况是:
我将展示它的图片:
Click "Add/Edit" at 'Remarks' column to show modal pop
Modal Textbox row1 show 'hello'
你可以看到modal tb得到row1和row2的相同值。
这是剧本:
$('a[data-toggle=modal]').click(function () {
var data_pN = String($(".pN", $(this).closest("tr")).html());
var data_cN = String($(".cN", $(this).closest("tr")).html());
var data_aN = String($(".aN", $(this).closest("tr")).html());
var data_rN = $('#<%=GridView1.ClientID %>').find('[id*="id_rN"]', $(this).closest("tr")).val(); //variable for textbox in modal
$('input[id*="id_pN"]').val(data_pN);
$('input[id*="id_cN"]').val(data_cN);
$('input[id*="id_aN"]').val(data_aN);
$('[id*="rN"]', $(this).closest("tr")).val(data_rN); //get value from texbox modal to textbox for column 'Remarktest'
});
这是gridview html:
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnRowDeleting="GridView1_RowDeleting"
CssClass="table table-hover table-striped" GridLines="None" RowStyle-BackColor="#5AC3DE"
AlternatingRowStyle-BackColor="#1ac6ff" Font-Size="Smaller">
<Columns>
<asp:BoundField DataField="Project No." HeaderText="Project No." ItemStyle-CssClass="pN" />
<asp:BoundField DataField="Ctr No." HeaderText="Ctr No." ItemStyle-CssClass="cN" />
<asp:BoundField DataField="Activity" HeaderText="Activity" ItemStyle-CssClass="aN" />
<asp:TemplateField HeaderText="ad" >
<ItemTemplate>
<asp:TextBox ID="rN" runat="server"></asp:TextBox></ItemTemplate>
</asp:TemplateField>
<%--<asp:BoundField DataField="Remark" HeaderText="Remark" ItemStyle-CssClass="rN" Visible="false"/>--%>
<asp:TemplateField HeaderText="Remarks">
<ItemTemplate>
<!-- Link trigger modal -->
<a data-toggle="modal" href="#myModal" id="modalLink">Add/Edit</a>
<%--<asp:TextBox ID="rN" runat="server"></asp:TextBox>--%>
<!-- Modal tabindex="-1" role="dialog" div class="modal-dialog modal-lg" role="document"-->
<div class="modal container fade" id="myModal" aria-labelledby="myModalLabel" style="width: 60%;
margin-bottom: 20%">
<%--<div class="modal-dialog modal-lg">--%>
<%--<div class="modal-content">--%>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h3 class="modal-title" id="myModalLabel">
Details</h3>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-2">
<div class="form-group">
<h4>
Project No.</h4>
<asp:TextBox ID="id_pN" runat="server" CssClass="form-control" ReadOnly="true" Font-Size="Smaller"></asp:TextBox>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<h4>
Ctr No.</h4>
<asp:TextBox ID="id_cN" runat="server" CssClass=" form-control" ReadOnly="true" Font-Size="Smaller"></asp:TextBox>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<h4>
Activity</h4>
<asp:TextBox ID="id_aN" runat="server" CssClass=" form-control" ReadOnly="true" Font-Size="Smaller"></asp:TextBox>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<h4>
Remark</h4>
<asp:TextBox ID="id_rN" runat="server" CssClass="form-control" TextMode="MultiLine" Rows="4"
Font-Size="Small"></asp:TextBox>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-sm btn-default" data-dismiss="modal" >
Close</button>
</div>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Actual" HeaderText="Actual To End of Week" />
<asp:TemplateField HeaderText="Sat st">
<ItemTemplate>
<asp:TextBox ID="tb_nt_sat" runat="server" CssClass="tb_day"></asp:TextBox></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Sat ot">
<ItemTemplate>
<asp:TextBox ID="tb_ot_sat" runat="server" CssClass="tb_day" ReadOnly="true"></asp:TextBox></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Sun st">
<ItemTemplate>
<asp:TextBox ID="tb_nt_sun" runat="server" CssClass="tb_day" ReadOnly="true"></asp:TextBox></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Sun ot">
<ItemTemplate>
<asp:TextBox ID="tb_ot_sun" runat="server" CssClass="tb_day" ReadOnly="true"></asp:TextBox></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Mon st">
<ItemTemplate>
<asp:TextBox ID="tb_nt_mon" runat="server" CssClass="tb_day"></asp:TextBox></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Mon ot">
<ItemTemplate>
<asp:TextBox ID="tb_ot_mon" runat="server" CssClass="tb_day" ReadOnly="true"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Tue st">
<ItemTemplate>
<asp:TextBox ID="tb_nt_tue" runat="server" CssClass="tb_day"></asp:TextBox></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Tue ot">
<ItemTemplate>
<asp:TextBox ID="tb_ot_tue" runat="server" CssClass="tb_day" ReadOnly="true"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Wed st">
<ItemTemplate>
<asp:TextBox ID="tb_nt_wed" runat="server" CssClass="tb_day"></asp:TextBox></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Wed ot">
<ItemTemplate>
<asp:TextBox ID="tb_ot_wed" runat="server" CssClass="tb_day" ReadOnly="true"></asp:TextBox></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Thu st">
<ItemTemplate>
<asp:TextBox ID="tb_nt_thu" runat="server" CssClass="tb_day"></asp:TextBox></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Thu ot">
<ItemTemplate>
<asp:TextBox ID="tb_ot_thu" runat="server" CssClass="tb_day" ReadOnly="true"></asp:TextBox></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Fri st">
<ItemTemplate>
<asp:TextBox ID="tb_nt_fri" runat="server" CssClass="tb_day"></asp:TextBox></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Fri ot">
<ItemTemplate>
<asp:TextBox ID="tb_ot_fri" runat="server" CssClass="tb_day" ReadOnly="true"></asp:TextBox></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="hourtest">
<ItemTemplate>
<asp:TextBox ID="hTest" runat="server" CssClass="tb_day" ReadOnly="true"></asp:TextBox></ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Week" HeaderText="Weekly Total" />
<asp:BoundField DataField="Remain" HeaderText="Remaining hour" />
<asp:CommandField ShowEditButton="True" ButtonType="Button" />
<asp:CommandField ShowDeleteButton="True" ButtonType="Button" />
</Columns>
</asp:GridView>
很高兴有人可以帮助我。 :)
答案 0 :(得分:0)
尝试这样的事情
HTML MARKUP: 添加类toyour文本框:
<asp:TextBox ID="id_pN" runat="server" CssClass="cls_pN form-control" ReadOnly="true" Font-Size="Smaller"></asp:TextBox>
<asp:TextBox ID="id_cN" runat="server" CssClass="cls_cN form-control" ReadOnly="true" Font-Size="Smaller"></asp:TextBox>
<强> JQUERY:强>
$('a[data-toggle=modal]').click(function () {
var self=$(this);
var selfTR=self.closest('tr');
// get current row textbox value
var txt_p=selfTR.find(".cls_pN").val();
var txt_c=selfTR.find(".cls_cN").val();
alert(txt_p);
alert(txt_c);
});