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

Changing label to textbox on javascript

本文关键字：文本 标签 javascript      更新时间：2023-09-26

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

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

这是我的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 />

我知道在网格视图中很难找到控件，所以我所做的是在服务器端创建一个atrribute，传递给我的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 真的很陌生

谢谢你花时间和精力阅读我的问题。

尝试更改以下行：

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-配有图片，甚至在页面底部的动态演示中更改设置。

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

相关文章：