javascript - 单击单元格时清除 gridview 模板字段中的单元格值

Question

我正在使用带有模板字段的 gridview 控件，如下面的代码所示。用户在其中更新 gridview 控件中的值；我的要求是当用户单击该单元格时清除该单元格的内容。换句话说，当用户单击某个单元格时，该单元格应该自行清除，并且用户应该能够输入值。如果用户在单击单元格后未输入值并单击其他位置，我需要将原始值取回到单元格中。

我做了很多研究，发现这里有一篇关于 SO 的文章建议使用 Java Script；我尝试过(在下面的代码中以粗体显示)，但它不起作用。对我做错了什么有什么想法吗？提前致谢。

<asp:TemplateField HeaderText="Q1" SortExpression="CYQ1">
            <EditItemTemplate>
              <asp:TextBox ID="CYTextBox" runat="server" Text='<%# Bind("CYQ1") %>' Width="50"></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
              <asp:TextBox ID="CYQ1TextBox" runat="server" MaxLength="20" Width="50" 
                Text = '<%# Bind("CYQ1","{0:0.##}") %>' Font-Names="Tahoma" Font-Size="8pt"> 

                    **<script type="text/javascript">
                        var txtsearch = document.getElementById("CYQ1TextBox");
                        txtsearch.onfocus = function () {
                            if (this.value == "Group Name..") {
                                this.value = "";
                            }
                        };

                        txtsearch.onblur = function () {
                            if (this.value.length == 0) {
                                this.value = "Group Name...";
                            }
                        }
                    </script>**      

              </asp:TextBox>
            </ItemTemplate>        
              <HeaderStyle Width="40px" Font-Names="Tahoma" Font-Size="8pt"/>
          </asp:TemplateField>

Answer 1

使用 jQuery 尝试一下

<asp:GridView ID="Grid1" runat="server" AutoGenerateColumns="false">
    <Columns>
<asp:TemplateField HeaderText="Q1" SortExpression="CYQ1" ItemStyle-CssClass="ValueCell">
            <ItemTemplate >
              <asp:Label ID="CYQ1Label" runat="server" MaxLength="20" Width="50" 
                Text='<%# Bind("CYQ1","{0:0.##}") %>' />
              <asp:TextBox ID="CYQ1TextBox" runat="server" MaxLength="20" Width="50" 
               Text='<%# Bind("CYQ1","{0:0.##}") %>' style="display:none" /> 
            </ItemTemplate>        
          </asp:TemplateField>
</Columns>
</asp:GridView>

注意:

• 每个单元格的 CSSclass。
• 隐藏文本框并显示:无
• 无编辑模板

• 每页应仅包含一次 jQuery，且位于任何 jQuery 代码之前

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  
  <script>
      jQuery(document).ready(function ($) {
          $('td.ValueCell span').click(function () {
              var span = $(this);
              span.hide();
              var box = span.siblings('input:text');
              box.val(span.text());
              box.show();
          });
  
          $('td.ValueCell input:text').blur(function () {
              var box = $(this);
              box.hide();
              var span = box.siblings('span');
  
              if (box.val() == '') {
                  box.val(span.text());
              }else {
                  span.text(box.val());
              };
              span.show();
          });
      });
  </script> 
  

在代码隐藏中，您可以在某些按钮单击事件上从文本框读取值

protected void Button1_Click(object sender, EventArgs e)
{
    foreach (GridViewRow row in Grid1.Rows)
    {
        // Textbox will presist values entered by user (label will not)  
        var box = (TextBox)row.FindControl("CYQ1TextBox");


    }
}