Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Jeremy Barbe
Jeremy Barbe
8,728 Points

Dynamically entering rows into div tables, numerically

I have a form, that when submitted, creates a new (div) row in a (div) table. Each row is already assigned a numerical value based on a few of the user's selections in the form. I need a way to dynamically add the new row to the table based on it's assigned numerical value, in ascending order. The entire table cannot be submitted each time I do this, as I want to add a CSS animation to the addition of the row in the future. Any help would be greatly appreciated!! I've run into a wall on this problem for some reason, and it's really frustrating me.

2 Answers

Tom Geraghty
Tom Geraghty
24,174 Points
Tom Geraghty
Tom Geraghty
24,174 Points

Can you put up some code of what you've written so far? This can really help others to debug and guide you. Thanks!

LaVaughn Haynes
LaVaughn Haynes
12,397 Points
LaVaughn Haynes
LaVaughn Haynes
12,397 Points

I would use something like a modular javaScript approach. That way you can manipulate javaScript objects and then render the object to the page. I would definitely NOT do it the way I did in this example. It's not even modular or efficient. Its basically quickly put together to illustrate manipulating javaScript and using an object to update the HTML.

https://jsbin.com/vikiqoleci/edit?html,output

The Object Oriented JavaScript course might be a good place to go if you have not taken it. https://teamtreehouse.com/library/objectoriented-javascript

If you have, then the LearnCodeAcademy video series on youTube is also pretty good https://www.youtube.com/watch?v=HkFlM73G-hk&list=PLoYCgNOIyGABs-wDaaxChu82q_xQgUb4f

Jeremy Barbe
Jeremy Barbe
8,728 Points

Thanks for your example...I took the OOJS course but obviously putting everything into practice is another feat, and this is the first project I'm working on. I don't think the concept of "modular" JS has ever even been presented to me in the materials here, I'll try and do some research.

LaVaughn Haynes
LaVaughn Haynes
12,397 Points

I took the OOJS course and then watched the Modular JS Series. It really helped me. I used to do the "spaghetti code" thing but the modular appraoch has been so much nicer for me. This was my first project after learning it. It's not perfect but I was very happy because I wouldn't have been able to do it as easily as I did if I hadn't learned the new approach.

I've started other projects since then but just have not uploaded them. Either way, whether you decide to give modular a try or take another approach, good luck with the project.

Jeremy Barbe
Jeremy Barbe
8,728 Points

I'll definitely watch the series and try to apply the information to my next project...I think it would feel too tragic at this point for me to start this app over again, so I'll just stick to what I'm doing for now, haha. Thanks a lot for the info.