如何使用JQuery模式窗口在GridView中的同一行上检索TR数据

我试图关注此链接： 链接到示例

我在SP Visual Web部件中有以下GridView：

                
 <asp:Label ID="lblEllipsis" runat="server" Text='' ToolTip=''> 
     <asp:TextBox ID="TextBox1" runat="server" Text='' CssClass="sumM">   <asp:Label ID="Label1" runat="server" Text=''>      

生成代码后，它在网页上看起来像这样：

每行都有自己的数据和生成的HTML示例：

   VIEW   After Hours   Pediatrics;   
  All Providers;  
     
 Callback Number ​  
       
 THIS IS A TEST GUIDELINE BUT NOT SHOWN TO THE USER BUT WILL BE SHOWN IN THE MODEL WINDOW. 
    

CSS从视图中隐藏列但仍然从代码隐藏执行：

 .gLine { display: none; } 

使用以下命令显示模态窗口：

 
 Id:   

我试图在JQuery中通过以下方法显示链接点击Guideline标题下的行中的数据：

 function test() { alert("test"); $("#infoShow").html($(".gLine", $(this).closest("tr")).html()); $("#dialog").dialog({ title: "View Guideline", buttons: { Ok: function () { $(this).dialog('close'); } }, modal: true }); } 

在上面的示例中，当我单击VIEW链接时，模式窗口应显示：

  
 THIS IS A TEST GUIDELINE BUT NOT SHOWN TO THE USER BUT WILL BE SHOWN IN THE MODEL WINDOW. 
  

但它什么都没显示。

如何修改我的JQuery代码以使用类gLine显示TD内的文本

我也尝试了下面的内容，但我一直undefined第二个警报：

 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 }); } 

Answer 1

以下是如何使您的演示工作：

首先，从标记中删除标记。

第二个删除onclick="javascript:test();return false;" 来自你的链接

最后，将您的代码更改为此（ 演示 ）：

 $(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 }); }); }); 

请注意，当您使用jQuery UI时，请包含相应版本的jQuery。

---

编辑：问题中的代码不起作用的原因是因为onclick调用test()而没有对元素的任何引用。 如果它看起来像这样：

 onclick="javascript:test(this);return false;" 

然后测试function可以这样做：

 function test(element) { // ... $("#infoShow").html($(".gLine", $(element).closest("tr")).html()); // ... }