如何使用 JQuery 模式窗口检索 GridView 中同一行的 TR 数据 [英] How to retrieve the TR data on the same row within GridView using JQuery modal window
问题描述
我正在尝试点击此链接:):
$(function () {$('table a').click(function () {$("#infoShow").html($(".gLine", $(this).closest("tr")).html());$("#dialog").dialog({title: "查看指南",纽扣: {好的:函数(){$(this).dialog('close');}},模态:真});});});请注意，当您使用 jQuery UI 时，请包含相应版本的 jQuery.
<小时>问题中的代码不起作用的原因是因为 onclick 正在调用 test() 而没有对元素的任何引用.如果它看起来像这样:
onclick="javascript:test(this);return false;"那么测试函数可以这样做:
函数测试(元素){//...$("#infoShow").html($(".gLine", $(element).closest("tr")).html());//...}I am trying to follow this link: Link to Example
I have the following GridView in a SP Visual Web Part:
<asp:GridView ID="BookingResults" runat="server" EnableModelValidation="True" AutoGenerateColumns="False" AllowSorting="true" ForeColor="Black">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:Label runat="server" ID="commHdr" Text="Show Guideline" />
</HeaderTemplate>
<ItemTemplate>
<asp:LinkButton runat="server" ID="btnShow3" CssClass="btnSearch3" Text="VIEW" PostBackUrl="javascript:void(0);" OnClientClick="javascript:test();return false;"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="ID" HeaderText="ID" ItemStyle-VerticalAlign="Top" />
<asp:BoundField DataField="Topic" HeaderText="Topic" ItemStyle-VerticalAlign="Top" />
<asp:BoundField DataField="Location" HeaderText="Location" ItemStyle-VerticalAlign="Top" />
<asp:BoundField DataField="Specialty" HeaderText="Specialty" ItemStyle-VerticalAlign="Top" />
<asp:TemplateField HeaderText="Provider Name">
<ItemTemplate>
<div style="width: 155px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
<asp:Label ID="lblEllipsis" runat="server" Text='<%#Eval("Provider") %>' ToolTip='<%#Eval("Provider") %>'></asp:Label>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Summary" ItemStyle-VerticalAlign="Top">
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("Summary") %>' CssClass="sumM"></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Bind("Summary") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Guideline" HeaderText="Guideline" ItemStyle-CssClass="gLine" HeaderStyle-CssClass="gLine" />
</Columns>
</asp:GridView>
After the code is generated it looks like this on the webpage:
Each row has its own data and an example of generated HTML:
<tr>
<td>
<a onclick="javascript:test();return false;" id="ctl00_ctl33_g_36ed1b14_1f08_43fb_8099_eb3423a33ed9_BookingResults_ctl05_btnShow3" class="btnSearch3" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ctl33$g_36ed1b14_1f08_43fb_8099_eb3423a33ed9$BookingResults$ctl05$btnShow3", "", true, "", "javascript:void(0);", false, true))">VIEW</a>
</td>
<td valign="top">
After Hours
</td>
<td valign="top">
Pediatrics;
</td>
<td>
<div style="width: 155px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
<span id="ctl00_ctl33_g_36ed1b14_1f08_43fb_8099_eb3423a33ed9_BookingResults_ctl05_lblEllipsis" title="All Providers;">
All Providers;
</span>
</div>
</td>
<td class="sumM" valign="top">
<span id="ctl00_ctl33_g_36ed1b14_1f08_43fb_8099_eb3423a33ed9_BookingResults_ctl05_Label1">
<html>
<p>
<span style="FONT-SIZE:11pt;">Callback Number
<span id="ms-rterangepaste-end"></span>
</span>
</p>
</html>
</span>
</td>
<td class="gLine" valign="top"> <!-- HIDDEN FROM USER BUT IN SOURCE CODE -->
<html>
<p>
THIS IS A TEST GUIDELINE BUT NOT SHOWN TO THE USER BUT WILL BE SHOWN IN THE MODEL WINDOW.
</p>
</html>
</td>
</tr>
CSS to hide the column from view but still execute from code-behind:
.gLine {
display: none;
}
Using the following to display the modal window:
<div id="dialog" style="display: none">
<b>Id:</b> <span id="infoShow"></span>
</div>
I am trying to display the data from row under the Guideline header respective to the link click by the following method in JQuery:
function test() {
alert("test");
$("#infoShow").html($(".gLine", $(this).closest("tr")).html());
$("#dialog").dialog({
title: "View Guideline",
buttons: {
Ok: function () {
$(this).dialog('close');
}
},
modal: true
});
}
In the example above, when I click VIEW link, the modal window should display:
<HTML>
<p>
THIS IS A TEST GUIDELINE BUT NOT SHOWN TO THE USER BUT WILL BE SHOWN IN THE MODEL WINDOW.
</p>
</HTML>
but it is displaying nothing.
How do I modify my JQuery code to show the text inside the TD with class gLine
I tried the below as well but I keep getting undefined for the second alert:
function test() {
alert("test");
$("#infoShow").html($(".gLine", $(this).closest("tr")).html());
var tableData = $(this).children("td").map(function () {
return $(this).text();
}).get();
alert(tableData[5]);
$("#dialog").dialog({
title: "View Guideline",
buttons: {
Ok: function () {
$(this).dialog('close');
}
},
modal: true
});
}
Here is how you can make your demo work:
First, remove the <html> tags from your markup.
Second remove the onclick="javascript:test();return false;" from your links
Lastly, change your code to this (demo):
$(function () {
$('table a').click(function () {
$("#infoShow").html($(".gLine", $(this).closest("tr")).html());
$("#dialog").dialog({
title: "View Guideline",
buttons: {
Ok: function () {
$(this).dialog('close');
}
},
modal: true
});
});
});
Please note that when you use jQuery UI, include the appropriate version of jQuery.
Edit: The reason why the code in the question doesn't work is because the onclick is calling test() without any reference to the element. If it looked like this:
onclick="javascript:test(this);return false;"
then the test function could have done this:
function test(element) {
// ...
$("#infoShow").html($(".gLine", $(element).closest("tr")).html());
// ...
}
这篇关于如何使用 JQuery 模式窗口检索 GridView 中同一行的 TR 数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
