使用javascript或jquery创建动态文本框

时间:2014-01-18 03:44:28

标签: c# jquery asp.net button textbox

我不知道它叫什么(编程新)但我需要制作1个TextBox和1个Button,如果用户在TextBox中输入任意数字并单击Button,TextBox将显示取决于TextBox中输入的数字例如,用户在单击按钮后在TextBox中输入5 5 TextBox将显示

<table style="margin-top:10px; margin-bottom:10px">
                <tr>
                    <td width="300" style="text-align:left"><asp:Label ID="lbres1" runat="server"                            Text="Address"></asp:Label></td>
                    <td width="300"><asp:TextBox ID="txtres2" class="basetxt" runat="server" Width="290"></asp:TextBox></td>
                </tr>
                <tr>
                    <td style="text-align:left"><asp:Label ID="lbres3" runat="server" Text="Number of House occupant"></asp:Label></td>
                    <td><asp:TextBox ID="txtres4" class="basetxt" runat="server" Width="290">  </asp:TextBox></td>
                </tr>
                <tr>
                    <td style="text-align:left"><asp:Button ID="btnAddOccupant" runat="server" Text="+" />
                    <asp:Label ID="lbres5" runat="server" Text="Add Occupant"></asp:Label></td>
                </tr>
            </table>

我应该添加1个TextBox和c#,还是jquery会完成其余的工作?

它位于jquery对话框中btw

1 个答案:

答案 0 :(得分:1)

您可以使用javascript或JQuery来完成。在这里,我为您提供使用JavaScript和JQuery。请找到以下相同的样本:

使用JavaScript:

<input type="text" id="textInput" value="" />&nbsp;
<input type="button" id="buttonCreateTextbox" value="Create Textbox" onclick="CreateText();"/>

<div id="divDynamicTexts"></div>

<script type="text/javascript" language="javascript">
    function CreateText() {
        var text = '<input type="text#" id="textInput" value="" /><br/>';
        var textCount = document.getElementById('textInput').value;
        var html = '';
        for (var i = 0; i < $('#textInput').val() ; i++) {
            html = document.getElementById('divDynamicTexts').innerHTML;
            document.getElementById('divDynamicTexts').innerHTML = html + text.replace('#', i);
        }
    }
</script>

使用JQuery:

<input type="text" id="textInput" value="" />&nbsp;
<input type="button" id="buttonCreateTextbox" value="Create Textbox" onclick="CreateText();"/>

<div id="divDynamicTexts"></div>

<script type="text/javascript" language="javascript">
    $('#buttonCreateTextbox').click(function () {
        var text = '<input type="text#" id="textInput" value="" /><br/>';
        for (var i = 0; i < $('#textInput').val(); i++) {
            $('#divDynamicTexts').append(text.replace('#', i));
        }
    })
</script>
  

注意:以上示例仅为示例。您可以根据自己的需要进行更改   要求