asp.net jquery用文本框添加行（克隆行）並動態下拉

Question

當用戶單擊添加框屬性時，行（即需要添加2下拉列和文本框的行）上面的行需要使用jquery動態創建（這樣就沒有回發帖）。 用戶可以根據需要添加任意數量的數據，並在單擊復選框時需要刪除該行。 如何通過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>

Answer 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字段中指定的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();
});

我認為這些評論非常詳盡，但有必要對以下幾點進行簡要說明：

首先，當我們克隆模板行時，我們將布爾值傳遞給克隆函數。 這說明除了我們克隆的DOM元素之外，我們還應克隆附加到這些元素的事件處理程序，並將它們附加到新克隆。 這對於“刪除行”復選框起作用很重要。

其次，當我們克隆模板行時，我們還克隆了所有元素的所有屬性，包括ID。 我們不希望這樣，因為它違反了XHTML合規性和我的原因問題。 因此，我們剝離了其ID的所有克隆元素。

最后，因為您正在使用提交按鈕，所以記住在按鈕的單擊事件中返回false非常重要，以避免它提交表單並導致回發。

希望這能回答你的問題。 最后要記住的是，由於您使用jQuery創建所有這些行，因此服務器不會准備好接收輸入值的對象。 如果您需要服務器訪問該信息，您必須找出向其發送該信息的方法。

Answer 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();
    }
);