在 JavaScript 中隐藏文本框

hide a textbox in javascript

本文关键字：文本 隐藏 JavaScript      更新时间：2023-09-26

尝试使用以下脚本隐藏文本框：

function EnableTextBox(clientId2, clientId1) {
        var label = eval("document.getElementById('" + clientId2 + "')");
        var textBox = eval("document.getElementById('" + clientId1 + "')");
        if (label.Visible == true) {
            label.Visible = false;
            textBox.Visible = true;
        }
        else {
            label.Visible = true;
            textBox.Visible = false;
        }
    }

文本框与标签位于同一单元格中，事件在gridview_ondatabound事件期间在代码隐藏中创建：

if (e.Row.RowType == DataControlRowType.DataRow)
        {
            Label lblNotes = (Label)(e.Row.Cells[1].Controls[1]);
            TextBox tbNotes = (TextBox)(e.Row.Cells[1].Controls[3]);
            if (lblNotes != null)
            {
                lblNotes.Attributes.Add("methodstring", string.Format("EnableTextBox('{0}', '{1}')", lblNotes.ClientID, tbNotes.ClientID));
                lblNotes.Attributes.Add("onClick", "eval(this.methodstring)");
            }
        }

我还没有解决的问题是我的脚本中的变量 tbNotes 仍处于空状态。 有什么建议吗？

谢谢

你几乎在那里，你只需要使用style.display来显示/隐藏元素。

在下面的代码中，将显示一个文本框，如果单击标签，标签将被隐藏。

按照你的逻辑，一旦标签被隐藏，我不知道如何显示它。

.ASPX

<asp:GridView runat="server" ID="GridView1"
    AutoGenerateColumns="False" OnRowDataBound="GridView1_RowDataBound">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:Label runat="server" ID="NotesLabel" 
                    Text='<%# Eval("Notes") %>' />
                <asp:TextBox runat="server" ID="NotesTextBox" 
                    Text='<%# Eval("Notes") %>' />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
<script type="text/javascript">
    function enableTextBox(label, textbox) {
        var lbl = document.getElementById(label);
        var txt = document.getElementById(textbox);
        if (lbl.style.display == "" || lbl.style.display == "block") {
            lbl.style.display = "none";
            txt.style.display = "block";
        } else {
            lbl.style.display = "block";
            txt.style.display = "none";
        }
    }
</script>

代码隐藏

protected override void OnLoad(EventArgs e)
{
    if (!IsPostBack)
    {
        GridView1.DataSource = new List<Something>
        {
            new Something {Id = 1, Notes = "One"},
            new Something {Id = 2, Notes = "Two"},
        };
        GridView1.DataBind();
    }
}
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        var notesLabel = e.Row.FindControl("NotesLabel") as Label;
        var notesTextBox = e.Row.FindControl("NotesTextBox") as TextBox;
        notesLabel.Attributes.Add("onclick", 
            string.Format("enableTextBox('{0}', '{1}')", 
            notesLabel.ClientID, notesTextBox.ClientID));
    }
}
public class Something
{
    public string Notes { get; set; }
    public int Id { get; set; }
}

注意：jQuery可能会容易得多，但它超出了范围。

使用e.Row.FindControl("ID_OF_CONTROL")而不是尝试浏览子集合。

if (e.Row.RowType == DataControlRowType.DataRow)
{
     Label lblNotes = e.Row.FindControl("lblNotes") AS Label; // Proper Id of the control
     TextBox tbNotes = e.Row.FindControl("tbNotes ") AS TextBox; // Proper Id of the control
     if (lblNotes != null && tbNotes !=null)
     {
         lblNotes.Attributes.Add("methodstring", string.Format("EnableTextBox('{0}', '{1}')", lblNotes.ClientID, tbNotes.ClientID));
         lblNotes.Attributes.Add("onClick", "eval(this.methodstring)");
     }
 }
相关文章：