在javascript上将标签更改为文本框答案

【问题标题】：Changing label to textbox on javascript在javascript上将标签更改为文本框
【发布时间】：2012-02-28 12:35:35
【问题描述】：

首先，我的英语不是很好，但我会尽量让它易于理解

所以我所做的是创建一个网格视图，其中列；两个控件一个标签和一个文本框标签设置为可见而文本框反之亦然

这是我的gridview的客户端代码

<asp:Image ID="img" onclick="javascript:Toggle(this);" runat="server" ImageUrl="~/Images/minus.gif"
                                    ToolTip="Collapse" Width="7px" Height="7px" ImageAlign="AbsMiddle" /></a>
                            <asp:Label ID="lbllastname" Height="15px" Width="180px" runat="server" Text='<%# Eval("CourseCatName")%>'></asp:Label>
                            <asp:TextBox ID="txtCourseCategory" AutoPostBack="true" runat="server" Text='<%# Eval("CourseCatName")%>'
                                Font-Size="XX-Small" Font-Names="Verdana" Style="display: none" OnTextChanged="txtCourseCategory_TextChanged"
                                Height="16px" Width="207px"></asp:TextBox><br />

我知道很难在 gridview 中找到控件，所以我所做的是在我的服务器端创建一个属性以传递给我的 javascript 函数这就是我所做的

Dim txttry As TextBox = DirectCast(e.Row.FindControl("txtCourseCategory"), TextBox)
        Dim labeltry As Label = DirectCast(e.Row.FindControl("lbllastname"), Label)
        labeltry.Attributes.Add("onclick", "javascript:return validate('" + txttry.ClientID + "','" + labeltry.ClientID + "')")

在我的 javascript 上，我创建了一个函数来调用控件

  function validate(txtobj, lblobj) {

        document.getElementById(lblobj).style.display = 'none';
        document.getElementById(txtobj).style.display = 'block';  
    }

所以代码可以工作，我认为它几乎完成了，但是当我运行我的程序并单击标签时；标签隐藏，但文本框在下面，就像在那之间有一个<br/> 我再次检查了代码，但没有发现任何可以制作下面的文本框的东西。先生/女士，您认为是什么问题，或者我应该为它添加一个 CSS 吗？还是我的代码是个大问题？我愿意接受建议，无论好坏。顺便说一句，我对 javascript 很陌生

感谢您花费时间和精力尝试阅读我的问题。

【问题讨论】：

标签： javascript asp.net css gridview

【解决方案1】：

尝试更改以下行：

document.getElementById(txtobj).style.display = 'block';

成为：

document.getElementById(txtobj).style.display = '';

// OR

document.getElementById(txtobj).style.display = 'inline';

如果您将元素设置为block 元素，它将显示在下一行，因为这就是块元素的作用。如果将display 属性设置为空字符串，则应通过将其设置为特定元素类型的默认display 类型再次使其可见，在输入元素的情况下应为inline。如果这不起作用，您可以将其显式设置为inline。

有关display 的更多信息可在此处获得：http://www.quirksmode.org/css/display.html - 包含图片，甚至在页面底部提供了即时更改设置的演示。

【讨论】：

谢谢先生，您是天使。 ^_^ 也感谢您的描述。现在工作正常。

【解决方案2】：

您也可以在不使用 javascript 的情况下执行此操作。为此，您需要使用 2 个面板。在一个面板中保留您的标签，在另一个面板中保留您的文本框。现在通过将其可见属性设置为 false 来保持带有文本框的面板不可见。现在在按钮单击事件中获取标签文本并将其存储在字符串变量中，并将包含标签的面板的可见属性更改为 false。然后将包含文本框的面板的可见属性更改为 true，并使用变量中的字符串设置文本属性。

【讨论】：