Для начала, вот рабочая демонстрация, на которую вы можете ссылаться в моем ответе: 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. Важно отметить, что при использовании этого подхода с таблицей строка шаблона должна находиться внутри таблицы, к которой вы будете добавлять строки, чтобы гарантировать, что ячейки имеют соответствующую ширину.
Последний бит разметки, который нам нужно сделать, - присвоить таблице идентификатор, чтобы мы могли манипулировать строками в нашем скрипте. Я выбрал «BoxTable».
Теперь давайте создадим наш скрипт. Поскольку вы используете .NET, важно помнить, что для любого тега с атрибутом runat="server" генерируемый атрибут идентификатора отличается от того, который вы назначаете в поле идентификатора элемента управления. Простой обходной путь для этого - сделать что-то вроде следующего:
var myClientID = '<%= myServerID.ClientID() %>';
Затем сервер выводит идентификатор клиента в строку для удобного использования в вашем сценарии.
Имея это в виду, вот наш сценарий:
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, которые мы клонируем, мы также должны клонировать обработчики событий, прикрепленные к этим элементам, и прикреплять их к новым клонам. Это важно для того, чтобы флажок «Удалить строку» работал.
Во-вторых, когда мы клонируем строку шаблона, мы также клонируем все атрибуты всех элементов, включая идентификаторы. Мы не хотим этого, потому что это нарушает соответствие XHTML и мои проблемы с причиной. Таким образом, мы удаляем все клонированные элементы из их идентификаторов.
Наконец, поскольку вы используете кнопку отправки, важно не забывать возвращать false в событии нажатия кнопки, чтобы избежать отправки формы и возникновения обратной передачи.
Надеюсь, это ответит на ваш вопрос. И последнее, что следует иметь в виду, это то, что, поскольку вы создаете все эти строки с помощью jQuery, на сервере не будет объектов, готовых для получения значений входных данных. Если вам нужен сервер для доступа к этой информации, вам необходимо определить способ отправки этой информации.