Adding Table Rows With jQuery
Saturday, November 22, 2008
Recently I needed a way to click a button and add a new row to a table with an animation using jQuery for people to add new data for a section. Simple right? Well I set up my table with a blank row at the bottom that I hid with CSS, and then when I press a button it clones that row it and puts it at the top with a .slideDown() animation. Here's the code I used:
$("#addRow").click(function(){
$("#blankRow").clone().prependTo("#myTable tbody").removeAttr("id").slideDown(500);
});
Looks pretty straightforward right? Well it works, but it doesn't seem to render correctly. Here's a demo of this in action to see what I mean.
Turns out that for most jQuery animations when they complete, the display CSS property is set to display:block;. Normally that's all fine and good, but a table row has to be set to display:table-row;. I can't edit how that animation finishes since it's part of jQuery, so now what?
Well someone on the jQuery Google Group had the great idea to just fill each table cell with a <div>, put all the contents I needed in there, and simply apply the .slideDown() animations to that <div> since by default they are set to display:block; anyway. Brilliant! Basically we never animate the table row itself, only the elements inside it.
I put together a pretty full featured demo with some other cool jQuery tricks I've been learning recently, so take a look and I hope this will help someone else out.
Comments
being using this demo to do some work of my own still having issue, but it was a great start.
I am not a jQuery guru, just started using it.
Try the animate to class in the jquery plugins. Don’t know if this will work though, just an idea…
nice, thanks!!
hi
it is a nice code , but i try to use it on my code in other table and when try to remove one row some other contents removed,i fixed it by added the following:
thisRow = $(this).parents(‘tr:eq(0)’);
thanks
Hi…It’s really nice job..I really appreciate it.
Can I change table element into div element in your script…?
Awesome script, best start of what I was searching for, just a couple things. When you click “submit table row” nothing happens. Secondly, is there a way to switch it so the new row apends to the bottom instead of top? Thanks!
Well, since it’s just a demo the submit button doesn’t do anything - that’s the point where you’d make it work with your server-side code or ajax, or whatever.
Yes, very easy to add it to the bottom instead of the top, but that may get confusing depending on the length of the table that’s already there. You hit add at the top, and you may not be able to see the bottom of the table and if something has been added you you to enter information into.
Thanks for getting back to me so quickly, I appreciate it. The add row to bottom thing wasn’t really necessary, I am currently messing with the code a bit, I am using the method in an order form for a client, and I just wanted make sure that when the form is submitted, the values in the “added” rows would be passed in the email.
Hey Chris, I am trying to increment an ID for each of the input names as a new row. I am new to JS and I have been messing with this since yesterday and I am having a little trouble getting this work. Any insight on how to do this would be greatly apprecited! Thanks.
Jay, to put an ID on an input all you’d have to do is select it after the row is cloned and modify its ID attribute. Something like:
num++;
thisRow.find(“input.ClassName”).attr(“id”,“newID”+num);
Thanks again Chris for getting back to me. Here is what I have going on:
http://www.tdidesign.com/designerorderform.php
I have for static rows upon entering the page name sequentially orderType1 through 4.
I have the max rows set to 10 so I need to figure out how to loop it so it adds names orderType5 through 10 when each new row is added.
I have tried a few different methods to no avail, I am a little new to JS & jQuery. I think I’m just having syntax issues. I’m more familiar with PHP than JS.
Again, I thank you for your response and I will try and use the suggestion you wrote above, and thank you for your patience.
I understand the submit button is disabled for the demo, but how can you have an “Add Table Rows” demo that doesn’t actually add a table row?
No demo = no working
Josh - Do you have javascript disabled? Both demo’s work fine for me. (The broken & the actual demo)
Actually, I misunderstood your question, I apologize. When you click “Add Row” it is actually adding a row. The submit button will serve a different purpose for each application. (i.e. forms). It just depends on what you are using it for. See my example in a previous post.
Hey Chris, its me again…lol. I am still struggling with this. I have added your suggestion but can’t seem to pass the value off to the input field.
Me again, Chris I can’t seem to figure this one out and neither can anybody else for that matter. I have tried several other forums and nobody has come up with a working solution to this, your thoughts?
Sorry, I’ve been busy!
Post the code you’ve got on http://jsbin.com , save it, and send me a link. I’ll take a look.
Hey Chris, sorry I haven’t gotten back to you, I’ve been quite busy as well. I will try and get this up for ya in the next few days. Thanks
I created a jQuery plug-in based off of what I learned here and elsewhere that doesn’t require you to wrap your code with a div. Check it out at: http://www.fletchzone.com/post/jQuery-Unobtrusively-Animated-Add-and-Remove-Table-Rows.aspx
Fletch
Hey Chris
i stuck somewhere that previews rows in the table cant get deleted is there in way to delete those rows
Please help
Hey Chris,
Awesome work! How can I have the row add at the bottom as opposed to the top? Thanks a lot!
Tyler
Is this a comment for Chris at fletchzone.com or Chris Barr?
@Tyler, on the line where the new table row is added change prependTo() to appendTo()
before:
newRow = $(”#”+blankRowID,$tableBody).clone().prependTo($tableBody)
after:
newRow = $(”#”+blankRowID,$tableBody).clone().appendTo($tableBody)
Nice, thanks a lot!
Hey Chris,
Is there a way to drop down a new row instead of cloning the “blankRow”? The reason for wanting to do this is I have a different set of variables I want to show up in the 3rd row. Thanks, you’re a big help!
Tyler