asp.net獲取帶有jQuery的gridview值並放在文本框中

我有一個隱藏了幾列的gridview。當我將鼠標懸停在網格上的每一行上時，我希望隱藏的列值顯示在gridview下面的文本框中。asp.net獲取帶有jQuery的gridview值並放在文本框中

以下是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>

來源

2015-02-12 user1135218

，如果你發佈渲染HTML這將是很容易解決的問題。 – 2015-02-12 08:23:19

嗨，我已經發布了gridview區域的一些呈現的HTML ......我希望這就夠了......謝謝。 – user1135218 2015-02-12 08:35:55

我會在html和jquery中發佈下面的答案。 – 2015-02-12 08:37:15

HTML代碼

指定類行的其他值控制爲每個隱藏的領域。「data1和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; 
     }

希望這有助於

來源

2015-02-12 08:37:56

太棒了！正是我所期待的。奇蹟般有效！謝謝弗雷賓。 – user1135218 2015-02-12 08:56:59

您隨時歡迎 – 2015-02-12 08:57:27

鼠標懸停事件調用客戶端功能，像下面和地圖，它使用的U值從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 
       } 
     }

來源

2015-02-12 08:36:30 Shirish

感謝您的指導，但我更喜歡弗雷賓的解決方案之後。不過，我感謝你的幫助。 – user1135218 2015-02-12 08:59:30

asp.net獲取帶有jQuery的gridview值並放在文本框中

回答

相關問題