Để bắt đầu, đây là một bản demo làm việc, mà bạn có thể tham khảo trong suốt câu trả lời của tôi: http://jsfiddle.net/EuyB8/.
Rõ ràng bản trình diễn ở dạng HTML thuần túy thay vì ASP.NET, nhưng tôi sẽ cố gắng giải quyết sự khác biệt.
Để bắt đầu, vì bạn sẽ muốn tạo một số điều khiển mà bạn sẽ nhân bản bằng cách sử dụng điều khiển .NET, cách tiếp cận điển hình của tôi là tạo mẫu ẩn, sau đó có thể được sử dụng để tạo bản sao mới. Như vậy, tôi sẽ có một hàng như sau:
<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>
sau đó tôi thêm một quy tắc CSS như sau:
#TemplateRow { display:none; }
Bây giờ chúng ta có một hàng mà chúng ta có thể sử dụng làm mẫu để thêm mới các hàng và đánh dấu thực tế cho mẫu vẫn có thể được tạo bởi .NET. Điều quan trọng cần lưu ý là khi sử dụng cách tiếp cận này với một bảng, hàng mẫu cần nằm bên trong bảng mà bạn sẽ gắn thêm các hàng, để đảm bảo rằng các ô có chiều rộng thích hợp.
Bit cuối cùng của đánh dấu chúng tôi sẽ cần làm là cung cấp cho bảng một ID để chúng tôi có thể thao tác các hàng trong tập lệnh của mình. Tôi đã chọn "BoxTable".
Bây giờ, hãy xây dựng kịch bản của chúng tôi. Vì bạn đang sử dụng .NET, nên nhớ rằng đối với bất kỳ thẻ nào có thuộc tính runat="server"
, thuộc tính ID được tạo không giống với thuộc tính bạn gán trong trường ID của kiểm soát. Cách giải quyết dễ dàng cho việc đó là thực hiện một số việc như sau:
var myClientID = '<%= myServerID.ClientID() %>';
Máy chủ sau đó xuất ID khách hàng thành chuỗi để sử dụng dễ dàng trong tập lệnh của bạn.
Với ý nghĩ đó, đây là kịch bản của chúng tôi:
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();
});
Tôi nghĩ những ý kiến khá kỹ lưỡng, nhưng một lời giải thích ngắn gọn về một vài điểm được bảo hành:
Đầu tiên, khi chúng tôi sao chép mẫu hàng, chúng tôi đang đi qua một boolean để chức năng clone. Điều này nói rằng ngoài các phần tử DOM chúng ta đang nhân bản, chúng ta cũng nên sao chép các trình xử lý sự kiện gắn liền với các phần tử đó và đính kèm chúng vào các bản sao mới. Điều này rất quan trọng để hộp kiểm "Xóa hàng" hoạt động.
Thứ hai, khi chúng tôi sao chép hàng mẫu, chúng tôi cũng nhân bản tất cả các thuộc tính của tất cả các phần tử, bao gồm cả các ID. Chúng tôi không muốn điều này bởi vì nó vi phạm tuân thủ XHTML và các vấn đề về nguyên nhân của tôi. Vì vậy, chúng tôi loại bỏ tất cả các yếu tố nhân bản của ID của họ.
Cuối cùng, bởi vì bạn đang sử dụng nút gửi, điều quan trọng là phải nhớ trả về sai trong sự kiện nhấp của nút, để tránh việc gửi biểu mẫu và gây ra đăng lại.
Hy vọng điều này sẽ trả lời câu hỏi của bạn. Một điều cuối cùng cần ghi nhớ là vì bạn đang tạo tất cả các hàng này với jQuery, máy chủ sẽ không có các đối tượng sẵn sàng để nhận các giá trị của các đầu vào. Nếu bạn cần máy chủ có quyền truy cập vào thông tin đó, bạn sẽ phải tìm ra phương pháp gửi thông tin đó.