如何清除html表中的所有文本框 [英] how to clear all text boxes present in a html table

问题描述

我创建了一个简单的注册页面，我想清除html表中存在的所有文本框。任何人都可以为此提供解决方案

Hi, I have created a simple registration page, I want to clear all the textboxes that are present in the html table. Could any one provide solution for this

<table id="tblReg">
        <tr><td>User Name</td>
            <td>:</td>
            <td><asp:TextBox ID="txtUName" runat="server" /></td>
        </tr>
        <tr><td>Email</td>
            <td>:</td>
            <td><asp:TextBox ID="txtEmail" runat="server" /></td>
        </tr>
        <tr>
            <td>Password</td>
            <td>:</td>
            <td><asp:TextBox ID="txtPwd" runat="server" TextMode="Password" /></td>
        </tr>
        <tr>
            <td>Confirm Password</td>
            <td>:</td>
            <td><asp:TextBox ID="txtCPwd" runat="server" TextMode="Password" /></td>
        </tr>
        <tr>
            <td></td>
            <td><asp:Button ID="btnReg" runat="server" OnClick="btnReg_Click" Text="Click"/></td>&nbsp;&nbsp;
            <td><asp:Button ID="btnCancel" runat="server" OnClick="btnCancel_Click" Text="Cancel"/></td>
        </tr>
    </table>

取消按钮点击事件我写了以下内容，但它不起作用...

on Cancel button's click event I have written the following, but its not working...

protected void btnCancel_Click(object sender, EventArgs e)
    {
        foreach (Control c in this.Controls)
        {

            if (c is TextBox)
            {
                ((TextBox)c).Text = String.Empty;
            }
        }
    }

推荐答案

问题是问题中的文本框不是直接子女 this.Controls 。你可以使用递归做其他事情，但这没什么意义。



在服务器端做这么简单的事情是个坏主意;你可以做到这一点，但是每个小动作中的服务器回调都会导致性能下降并浪费许多网站的带宽。



你可以很容易地做到这一点立即在客户端网站上。这个想法很简单：在JavaScript中，按ID或类型或元素和输入类型属性的组合查找所有输入元素，对于找到的控件集，分配它们的值属性为空字符串。



使用jQuery非常方便，这些问题已经解决了。它看起来像这样：

Your problem is that the text boxes in questions are not immediate children of this.Controls. You could do something else, using recursion, but it would make little sense.

It's a bad idea to do such a simple thing on a server side; you can do it, but the server callback in each tiny action is something which kills the performance and waste the bandwidth by so many Web sites.

You can easily do it on the client site in no time. The idea is simple: in JavaScript, find all the input elements by their IDs or by type, or combination of the element and input type attribute and, for the set of found controls, assign their value attributes to empty string.

It's very convenient to use jQuery for such things, where such problems are already solved. It can look something like this:

var textBoxSet =

（ input，[type ='text']）; // 假设您要涵盖
/ / all< input type =text>
// 元素
// 您可以使用更复杂的选择器只选择特殊情况
// 这类元素，例如，一个特定的表格，
// 或使用特定的CSS类...

textBoxSet.each（ function （index，element）{
element.val（' '）;
}）;

("input, [type='text']"); // assuming you want to cover // all <input type="text"> // elements // you can use more complex selector to select only special cases // of such elements, say, of one specific table, // or using specific CSS class... textBoxSet.each(function(index, element){ element.val(''); });

请参阅：

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement [<一个href =https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElementtarget =_ blanktitle =新窗口> ^ ]，

https://developer.mozilla.org/en-US/ docs / Web / HTML / Element / input＃attr-type [ ^ ]，

https： //api.jquery.com/element-selector [ ^ ]，

https://api.jquery.com/attribute-equals-selector [ ^ ]，

https://api.jquery.com/element-selector [ ^ ];

http：/ /api.jquery.com/jquery.each [ ^ ]，

http://api.jquery.com/val [ ^ ]。



如果您需要学习jQuery（强烈推荐），请参阅：

http://en.wikipedia.org/wiki / JQuery ，

http://jquery.com ，

http://learn.jquery.com ，

http://learn.jquery.com/using-jquery-core ，

http://learn.jquery.com/about-jquery/how-jquery-works （从这里开始）。

-SA

Please see:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement[^],
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-type[^],
https://api.jquery.com/element-selector[^],
https://api.jquery.com/attribute-equals-selector[^],
https://api.jquery.com/element-selector[^];
http://api.jquery.com/jquery.each[^],
http://api.jquery.com/val[^].

If you need to learn jQuery (highly recommended), please see:
http://en.wikipedia.org/wiki/JQuery,
http://jquery.com,
http://learn.jquery.com,
http://learn.jquery.com/using-jquery-core,
http://learn.jquery.com/about-jquery/how-jquery-works (start from here).

—SA

寻求此解决方案：清除C＃中的所有文本框

这篇关于如何清除html表中的所有文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！