StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
3630185
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2010-09-02T18:46:20.587
FavoriteCount
0
LastActivityDate
2010-09-02T18:46:20.587
LastEditDate
LastEditorUserId
0
OwnerUserId
107820
ParentId
3548027
PostTypeId
2
Score
8
ViewCount
0
LastEditorDisplayName
text
Body
To start with, here is a working demo, which you can reference throughout my answer: <a href="http://jsfiddle.net/EuyB8/" rel="nofollow noreferrer">http://jsfiddle.net/EuyB8/</a>. Obviously the demo is in plain HTML rather than ASP.NET, but I will try to address the differences. To start, since you will want to create some of the controls that you'll be cloning using .NET controls, my typical approach is to create a hidden template, which can then be used to create new copies. As such, I would have a row like the following: <pre><code><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> </code></pre> I then add a CSS rule like so: <pre><code>#TemplateRow { display:none; } </code></pre> Now we have a row that we can use as a template for adding new rows, and the actual markup for the template can still be generated by .NET. It is important to note that when using this approach with a table, the template row needs to be inside the table to which you'll be appending the rows, in order to ensure that the cells are the appropriate width. The last bit of markup we'll need to do is to give the table an ID, so that we can manipulate the rows in our script. I chose "BoxTable". Now, let's construct our script. Because you are using .NET, it's important to remember that for any tag with the <code>runat="server"</code> attribute, the ID attribute that is generated is not the same as the one you assign in the control's ID field. An easy workaround for that is to do something like the following: <pre><code>var myClientID = '<%= myServerID.ClientID() %>'; </code></pre> The server then outputs the client ID into a string for easy use in your script. With that in mind, here's our script: <pre><code>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(); }); </code></pre> I think the comments are pretty thorough, but a brief explanation of a few points is warranted: First, when we clone the template row, we are passing a boolean to the clone function. This says that in addition to the DOM elements we are cloning, we should also clone the event handlers attached to those elements, and attach them to the new clones. This is important in order for the "Delete Row" checkbox to work. Second, when we clone the template row, we are also cloning all the attributes of all the elements, including the IDs. We don't want this because it violates XHTML compliance and my cause problems. Thus, we strip all the cloned elements of their IDs. Lastly, because you are using a submit button, it's important to remember to return false in the button's click event, to avoid having it submit the form and cause a postback. Hopefully this answers your question. One final thing to bear in mind is that since you are creating all these rows with jQuery, the server will not have objects ready to receive the values of the inputs. If you need the server to have access to that information, you'll have to figure out so method of sending it that information.
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POasp.net jquery add row (clone row) with text box and drop down dynamically
 singulars
 PostTypePostTypeId
 PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. This table or related slice is empty.
UserOwnerUserId
1. USEnder
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
2. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
3. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
CommentsPostId
1. This table or related slice is empty.

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.