我想使用jQuery在Datagrid中获取我的列标题

时间:2011-12-18 19:51:35

标签: jquery asp.net gridview web

想要获取我点击的列的标题文本。 以下内容从单击发生的行和列中获取单元格数据:

if ($(this).index() == 3) {
    var row2 = $(this).parents("tr:first");
    var Col3 = row2.children("td:eq(3)").text();
    alert(Col3); 
}

我需要改为列标题。

由于

这是Gridview

 <asp:GridView ID="GV_Tab1" 
               class= "GV_card"
               AutoGenerateColumns="false" HeaderStyle-CssClass="HeaderCss2" 
               runat="server" 
               OnSelectedIndexChanged="GV_Scorecard_Tab1_SelectedIndexChanged"
               OnRowDataBound="GV_Tab1_RowDataBound"
               >
      <Columns>
           <asp:TemplateField HeaderText="">
             <ItemTemplate>
                  <asp:Label ID="Col" 
                    runat="server"
                    commandargument='<%# Container.DisplayIndex%>' 
                    ItemStyle-Width="54" 
                    ItemStyle-Height="20px" 
                  > </asp:Label> 
             </ItemTemplate>
           </asp:TemplateField>
           <asp:boundfield datafield="secure 1" headertext="secure 1" ItemStyle-Width="220px" ItemStyle-Height="20px"   />
           <asp:boundfield datafield="secure 2" headertext="secure 2" ItemStyle-Width="140px" ItemStyle-Height="20px" />
           <asp:boundfield datafield="aDays"  DataFormatString="{0:n0}" headertext="0-30 Days" visible='true' ItemStyle-Width="60px" ItemStyle-HorizontalAlign="Right"/>
           <asp:boundfield datafield="bDays"  DataFormatString="{0:n0}" headertext="31HorizontalAlign="Right"/>
           <asp:boundfield datafield="fDays"  DataFormatString="{0:n0}" headertext="151-180 Days" visible='true' ItemStyle-Width="60px" ItemStyle-HorizontalAlign="Right"/>
           <asp:boundfield datafield="gDays"  DataFormatString="{0:n0}" headertext="180+ Days" visible='true' ItemStyle-Width="60px" ItemStyle-HorizontalAlign="Right"/>
           <asp:boundfield datafield="Total"  DataFormatString="{0:n0}" headertext="Grand Total" ItemStyle-Width="65px" ItemStyle-HorizontalAlign="Right"/>
           <asp:TemplateField HeaderText="">
            <ItemTemplate>
                  <asp:Label ID="ColumnRef" 
                    runat="server"
                    commandargument='<%# Container.DisplayIndex%>' 
                    ItemStyle-Width="54" 
                    ItemStyle-Height="20px" 
                  > </asp:Label> 
            </ItemTemplate>  
           </asp:TemplateField>     

         </Columns>
 </asp:GridView>

这是事件代码:       $(document).ready(function(){

      if ($("#<%=GV_Tab1.UniqueID%> th") != "Column Title") {
          $("#<%=GV_Tab1.UniqueID%> td").click(function() {

以下是HTML标记:

<div id="GV_Tab1-divid" >
 <div>
    <table cellspacing="0" rules="all" class="GV_Scorecard" border="1" id="GV_Scorecard_Tab1" style="border-collapse:collapse;">
        <tr class="HeaderCss2">
            <th scope="col">&nbsp;</th><th scope="col">secure 1</th><th scope="col">secure 1</th><th scope="col">0-30 Days</th><th scope="col">31-60 Days</th><th scope="col">61-90 Days</th><th scope="col">91-120 Days</th><th scope="col">121-150 Days</th><th scope="col">151-180 Days</th><th scope="col">180+ Days</th><th scope="col">Grand Total</th><th scope="col">&nbsp;</th>
        </tr><tr>
            <td onClientClick="alert('Cell 0 Clicked');" style="background-color:#F5DCBE;">
                  <span id="GV_Tab1_ctl02_Col" ItemStyle-Width="54" ItemStyle-Height="20px" commandargument="0"></span> 
             </td><td style="background-color:#F5DCBE;height:20px;width:220px;">

3 个答案:

答案 0 :(得分:0)

你是说你的意思吗?

然后改变

row2.children("td:eq(3)").text()

row2.children("td:eq(3)").prop("title") //attr if you are using jquery < 1.7

答案 1 :(得分:0)

好问题:

http://jsbin.com/ecibuw/3/edit

var i=-1;
$("td").click (function (){

  i=$(this).parent("tr").find("td").index($(this));

    alert( $(this).parents("table").find("tr td").eq(i).text());

});

答案 2 :(得分:0)

首先,您需要找到行中元素的索引。之后去thead并让那个孩子拿到那个索引。

$('td').click(function()
{
    var index= $(this).parent().children().index(this);
    var val = $(this).parents('table:first').find('thead th').eq(index).text();
    alert(val);
});

Fiddle