c# - 当用户在文本框中输入数字时动态显示 div

Question

我有一个带有 id #txtUserEntry 的文本框，用户可以在其中输入住在自己房子里的家庭成员的号码，还有一个按钮 #btnAddOccupant 在输入文本框中的数字和 #divOccupantProfile 应根据输入的数字显示，因此这意味着 1 个家庭成员等于 1 #divOccupantProfile

aspx代码

<tr>
    <td style="text-align:left"><asp:Label ID="lbUserEntry" runat="server" Text="Number of House occupant"></asp:Label></td>
    <td><asp:TextBox ID="txtUserEntry" 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>

divOccupantProfile

<div id="divOccupantProfile">

<asp:Label ID="OPfamilyname" runat="server" Text="Family Name"></asp:Label>
<asp:TextBox ID="textOPfamilyname" runat="server"></asp:TextBox><br />

<asp:Label ID="OPfirstname" runat="server" Text="First Name"></asp:Label>
<asp:TextBox ID="textOPfirstname" runat="server"></asp:TextBox><br />

<asp:Label ID="OPmiddlename" runat="server" Text="Middle Name"></asp:Label>
<asp:TextBox ID="textOPmiddlename" runat="server"></asp:TextBox><br />

<asp:Label ID="OPmaritalstatus" runat="server" Text="Marital Status"></asp:Label>
<asp:DropDownList ID="ddlOPmaritalstatus" runat="server" >
    <asp:ListItem></asp:ListItem>
    <asp:ListItem>Married</asp:ListItem>
    <asp:ListItem>Single</asp:ListItem>
    <asp:ListItem>Divorced</asp:ListItem>
</asp:DropDownList><br />

<asp:Label ID="OPoccupation" runat="server" Text="Occupation"></asp:Label>
<asp:TextBox ID="textOPoccupation" runat="server"></asp:TextBox><br />

<asp:Label ID="OPrelationship" runat="server" Text="Relationship"></asp:Label>
<asp:DropDownList ID="ddlOPrelationship" runat="server" >
    <asp:ListItem></asp:ListItem>
    <asp:ListItem>Wife</asp:ListItem>
    <asp:ListItem>Daughter</asp:ListItem>
    <asp:ListItem>Son</asp:ListItem>
    <asp:ListItem>Father</asp:ListItem>
    <asp:ListItem>Mother</asp:ListItem>
    <asp:ListItem>House helper</asp:ListItem>
    <asp:ListItem>Driver</asp:ListItem>
 </asp:DropDownList>

 </div>

有人能给我举个例子吗

Answer 1

类似的东西

$('#btnAddOccupant').click(function(){
        var occupants = $('#txtUserEntry').val();
        //here some check on occupants.....

        for(int i = 0;i<occupants;i++){
            $(somewhere).append($('#divOccupantProfile').html());
        }
    })

一些建议:因为您将使用多个 divOccupantProfile，所以最好使用基于类的选择器而不是 ID，否则在您的页面中将有 1 个以上具有相同 ID 的元素。

$(某处)是您想要放置与每个占用者个人资料相关的所有 div 的“容器”

另请注意，.html() 函数会将 html 复制到 div 内，但不包括 div 本身。所以如果你想以这种方式形成N个元素

<div class="occupantProfile">...</div>
<div class="occupantProfile">...</div>

你必须使用

somewhere.append($('<div').append($('.occupantProfile')).html())