asp.net jquery 用文本框添加行（克隆行）并动态下拉

Posted 2023-03-05

【中文标题】asp.net jquery 用文本框添加行（克隆行）并动态下拉

【英文标题】：asp.net jquery add row (clone row) with text box and drop down dynamically

【发布时间】：2011-04-02 15:49:06

【问题描述】：

当用户单击添加框属性时，需要使用 jquery 动态创建上面的行（即需要添加 2 个下拉列表和文本框的行）（这样就没有回发）。用户将被允许添加任意数量的属性，并且当他们单击需要删除该行的复选框时。 jquery如何实现这一点。

 <asp:Panel ID="pnl_BoxAttr" runat="server">
          <table>
             <tr>
                 <th>
                      Name
                  </th>
                  <th>
                      Comparision
                  </th>
                  <th>
                      Value
                  </th>
                  <th>
                      Delete
                  </th>
              </tr>
               <tr>
                   <td>
                       <asp:DropDownList ID="ddl_BoxName" runat="server">
                               <asp:ListItem Value="attr1" Selected="True"></asp:ListItem>
                               <asp:ListItem Value="attr2"></asp:ListItem>
                               <asp:ListItem Value="attr3"></asp:ListItem>
                       </asp:DropDownList>
                  </td>
                  <td>
                      <asp:DropDownList ID="ddl_BoxComparision" runat="server">
                             <asp:ListItem Value="=" Selected="true"></asp:ListItem>
                             <asp:ListItem Value=">"></asp:ListItem>
                             <asp:ListItem Value="<"></asp:ListItem>
                             <asp:ListItem Value="Like"></asp:ListItem>
                             <asp:ListItem Value="!="></asp:ListItem>
                             </asp:DropDownList>
                   </td>
                  <td>
                               <asp:TextBox ID="btn_boxval" runat="server" ></asp:TextBox>

                   </td>
                   <td>
                         <asp:CheckBox ID="chk_DeleteBoxRow" runat="server" />
                   </td>
             </tr>
             <tr>
                 <td colspan="3"> 
                     <asp:Button ID="btn_AddAttr" Text="Add Box Attribute" runat="server"/>
                 </td>
             </tr>
        </table>
        </asp:Panel>

【参考方案1】：

首先，这是一个工作演示，您可以在我的回答中引用它：http://jsfiddle.net/EuyB8/。

显然演示是纯 html 而不是 ASP.NET，但我会尝试解决差异。

首先，由于您需要创建一些将使用 .NET 控件克隆的控件，因此我的典型方法是创建一个隐藏模板，然后可以使用该模板创建新副本。因此，我会有如下一行：

<tr id="TemplateRow">
    <td>
        <asp:DropDownList ID="ddl_BoxName" runat="server">
            <asp:ListItem Value="attr1" Selected="True"></asp:ListItem>
            <asp:ListItem Value="attr2"></asp:ListItem>
            <asp:ListItem Value="attr3"></asp:ListItem>
        </asp:DropDownList>
    </td>
    <td>
        <asp:DropDownList ID="ddl_BoxComparision" runat="server">
            <asp:ListItem Value="=" Selected="true"></asp:ListItem>
            <asp:ListItem Value=">"></asp:ListItem>
            <asp:ListItem Value="<"></asp:ListItem>
            <asp:ListItem Value="Like"></asp:ListItem>
            <asp:ListItem Value="!="></asp:ListItem>
        </asp:DropDownList>
    </td>
    <td>
        <asp:TextBox ID="btn_boxval" runat="server" ></asp:TextBox>

    </td>
    <td>
        <asp:CheckBox ID="chk_DeleteBoxRow" runat="server" />
    </td>
</tr>

然后我像这样添加一个 CSS 规则：

#TemplateRow  display:none; 

现在我们有了一个可以用作添加新行的模板的行，并且模板的实际标记仍然可以由 .NET 生成。请务必注意，在将这种方法用于表格时，模板行需要位于您将要向其追加行的表格内，以确保单元格具有适当的宽度。

我们需要做的最后一点标记是为表指定一个 ID，以便我们可以在脚本中操作行。我选择了“BoxTable”。

现在，让我们构建我们的脚本。因为您使用的是 .NET，请务必记住，对于任何具有 runat="server" 属性的标记，生成的 ID 属性与您在控件的 ID 字段中分配的属性不同。一个简单的解决方法是执行以下操作：

var myClientID = '<%= myServerID.ClientID() %>';

服务器然后将客户端 ID 输出为字符串，以便在您的脚本中使用。

考虑到这一点，这是我们的脚本：

var btn_AddAttr = '<%= btn_AddAttr.ClientID() %>';

$(function() 
    //attach the a function to the click event of the "Add Box Attribute button that will add a new row
    $('#' + btn_AddAttr).click(function() 
        //clone the template row, and all events attached to the row and everything in it
        var $newRow = $('#TemplateRow').clone(true);

        //strip the IDs from everything to avoid DOM issues
        $newRow.find('*').andSelf().removeAttr('id');

        //add the cloned row to the table immediately before the last row
        $('#BoxTable tr:last').before($newRow);

        //to prevent the default behavior of submitting the form
        return false;
    );

    //attach a remove row function to all current and future instances of the "remove row" check box
    $('#DeleteBoxRow').click(function() 
        //find the closest parent row and remove it
        $(this).closest('tr').remove();
    );

    //finally, add an initial row by simulating the "Add Box Attribute" click
    $('#' + btn_AddAttr).click();
);

我认为 cmets 相当透彻，但有必要简要解释几点：

首先，当我们克隆模板行时，我们将一个布尔值传递给克隆函数。这表示除了我们要克隆的 DOM 元素之外，我们还应该克隆附加到这些元素的事件处理程序，并将它们附加到新的克隆中。这对于“删除行”复选框起作用很重要。

其次，当我们克隆模板行时，我们也克隆了所有元素的所有属性，包括 ID。我们不希望这样做，因为它违反了 XHTML 合规性和我的问题。因此，我们将其 ID 的所有克隆元素剥离。

最后，由于您使用的是提交按钮，因此请务必记住在按钮的单击事件中返回 false，以避免提交表单并导致回发。

希望这能回答您的问题。要记住的最后一件事是，由于您使用 jQuery 创建所有这些行，服务器将没有准备好接收输入值的对象。如果您需要服务器访问该信息，您必须弄清楚发送该信息的方法。

【参考方案2】：

据我了解，您需要用户通过单击按钮插入新行（就像包含选择的行一样）？

首先你需要给带有添加按钮的 tr 一个 id，比如说“addTr”。

对于插入，您可以执行以下操作：

$('#btn_AddAttr').bind(
    'click',
    function() 
        $('#addTr').before( '<tr>' + 
                                /* entre tr content here */
                            '</tr>'
                          );
    
);

只要确保所有下拉菜单和文本框都有不同的 ID。

要从表中删除行，您应该添加一个类来帮助您识别所有删除复选框，比如“delChk”：

$('.delChk').bind(
    'click',
    function() 
        $(this).closest('<tr>').remove();
    
);