asp.net 使用 jquery 获取 gridview 值并放在文本框上

Question

我有一个隐藏了几列的网格视图。 当我将鼠标悬停在网格上的每一行上时，我希望隐藏的列值显示在网格视图下方的文本框中。

以下是 html/aspx 代码（缩短） 只有少数列是可见的，大部分是隐藏的。

     <asp:GridView ID="GridView1" >
           <rowstyle cssclass="GridRowStyle" />
           <Columns>                                  
              <asp:BoundField DataField="ClientsName"  HeaderText="ClientsName"></asp:BoundField>

             <asp:BoundField DataField="Clientsaddress1"  HeaderText="Clientsaddress1"><ItemStyle CssClass="hiddencol" /><HeaderStyle CssClass="hiddencol" /> </asp:BoundField>
              <asp:BoundField DataField="Clientsaddress2"  HeaderText="Clientsaddress3"><ItemStyle CssClass="hiddencol" /><HeaderStyle CssClass="hiddencol" /> </asp:BoundField>
    </columns>
    </asp:gridview>

<asp:TextBox ID="txtAddress1" runat="server" Width="250px"  ></asp:TextBox>
<asp:TextBox ID="txtAddress2" runat="server" Width="250px"  ></asp:TextBox>

以下是我用来获取我选择的 gridview 行的一些 Jquery 代码，但我无法获得它来为我提供 gridview 行上每个隐藏列的值。我已经尝试了在 stackoverflow 中找到的几段代码，但无法让它工作。 该代码为我提供了我所在的行号，很好，但无法获取隐藏的列值并将它们放在 gridview 下方各自的文本框中。

 $("#GridView1 tr td").mouseenter(function () {
                    var iColIndex = $(this).closest("tr td").prevAll("tr td").length;
                    var iRowIndex = $(this).closest("tr").prevAll("tr").length;
                    alert(iRowIndex)
                 });

感谢您的指导。

更新： 这是一个在 HTML 中呈现的示例。 该页面有大约 600 行文本，因此我缩短了仅显示 gridview 渲染外观的示例。

<tr title="Click to select this row." class="GridRowStyle" onclick="javascript:__doPostBack(&#39;GridView1&#39;,&#39;Select$0&#39;)">

<td class="hiddencol">23644</td>
<td class="hiddencol">10102</td>
<td class="hiddencol">Y</td>
<td class="hiddencol">21 Jump Street</td>
<td class="hiddencol">Sydney, Australia</td>
<td class="hiddencol">&nbsp;</td>
<td>

<table>
<tr>
<td class="STD_normal" style="width:150px; font-weight:bold">Apple Inc.</td>                                                       
</tr>
<tr>
<td class="STD_Normal_Grey" style="width:150px">Entered: 31-Jan-2015 </td>
</tr>
</table>                                              
</td><td>
<tr title="Click to select this row." class="GridRowStyle" onclick="javascript:__doPostBack(&#39;GridView1&#39;,&#39;Select$0&#39;)">
<td class="hiddencol">23644</td>
<td class="hiddencol">10102</td>
<td class="hiddencol">Y</td>
<td class="hiddencol">21 Jump Street</td>
<td class="hiddencol">Sydney, Australia</td>
<td class="hiddencol">&nbsp;</td>
<td>

<table>
<tr>
<td class="STD_normal" style="width:150px; font-weight:bold">Apple Inc.</td>                                                       
</tr>
<tr>
<td class="STD_Normal_Grey" style="width:150px">Entered: 31-Jan-2015 </td>
</tr>
</table>                                              
</td><td>

Answer 1

HTML 代码

为每个隐藏字段指定的类。 “data1 and data2”，所以我们可以直接使用该类获取元素。

<asp:GridView ID="GridView1" runat="server" CssClass="tableGrid">
            <RowStyle CssClass="GridRowStyle" />
            <Columns>
                <asp:BoundField DataField="ClientsName" HeaderText="ClientsName"></asp:BoundField>
                <asp:BoundField DataField="Clientsaddress1" HeaderText="Clientsaddress1">
                    <ItemStyle CssClass="hiddencol data1" />
                    <HeaderStyle CssClass="hiddencol" />
                </asp:BoundField>
                <asp:BoundField DataField="Clientsaddress2" HeaderText="Clientsaddress3">
                    <ItemStyle CssClass="hiddencol data2" />
                    <HeaderStyle CssClass="hiddencol" />
                </asp:BoundField>
            </Columns>
        </asp:GridView>

        <asp:TextBox ID="TextBox1" runat="server" CssClass="text1" Width="250px"></asp:TextBox>
        <asp:TextBox ID="TextBox2" runat="server" CssClass="text2" Width="250px"></asp:TextBox>

脚本

<script type="text/javascript" src="~/Scripts/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("table.tableGrid tr").mouseover(function (event) {
                var row = $(this);
                $(".text1").val($(row).find("td.data1").text());
                $(".text2").val($(row).find("td.data2").text());
            });
        });
    </script>

CSS

.hiddencol {
            display: none;
        }

希望对你有帮助

Answer 2

在鼠标悬停事件时调用如下所示的客户端函数，并将该控件与您想要的其他行值从 gridview 映射到文本框

   function IAmSelected(source, eventArgs) {
                if (source) {
                    // Get the HiddenField ID.
                    var hiddenfieldID = source.get_id().replace("chkAdd", "hfValue");// here you can add any control of your gridview row which value you want
                    $get(hiddenfieldID).value = eventArgs.get_value();//check value or alert
                    document.getElementById('<%= yrtextbox.ClientID %>').value = eventArgs.get_value(); //for textbox
                }
      }