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

Question

首先，我的英语不太好，但我会尽力使其易于理解

所以我所做的是创建一个 GridView ，其中列； 两个控件一个标签和一个文本框 标签设置为可见 而文本框则相反

这是我的 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 很陌生

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

Answer 1

尝试更改以下行:

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

成为:

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

// OR

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

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

有关显示的更多信息可在此处获取:http://www.quirksmode.org/css/display.html - 包含图片，甚至在页面底部有一个动态更改设置的演示。