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

HTML

Scott Smith
seal-mask
.a{fill-rule:evenodd;}techdegree
Scott Smith
Front End Web Development Techdegree Student 8,492 Points
Posted by Scott Smith
.a{fill-rule:evenodd;}techdegree
Scott Smith
Front End Web Development Techdegree Student 8,492 Points

checkbox filters for list table

I have an idea for a project I want to start but One thing has me stumped.

I'm looking to have a very large "table" (for lack of a better term for now) containing specific data.

What I would like to have is to the left, or possibly on the top, of this table have a series of checkboxes or filters, that would filter out items in the table that don't match the criteria.

I'm looking to keep this as simple as possible. Can someone point me in the right direction?

2 Answers

Steven Parker
Steven Parker
231,261 Points
Steven Parker
Steven Parker
231,261 Points

There are a variety of approaches to this, but it's hard to know what's "simplest" without seeing the actual data and selection criteria.

But one idea that comes to mind is to use a CSS class for each of the criteria, and layout the table giving each item all the class names that pertain to it. Then some JavaScript code could react to any checkbox changes by changing the visibility of the items based on the associated class(es).

After you've at least laid out the items and checkboxes, you could post your code for more specific assistance.

Scott Smith
seal-mask
.a{fill-rule:evenodd;}techdegree
Scott Smith
Front End Web Development Techdegree Student 8,492 Points
Scott Smith
.a{fill-rule:evenodd;}techdegree
Scott Smith
Front End Web Development Techdegree Student 8,492 Points

well, I don't want to give too much away on a forum. Basically, i'm going to list a long list of products. I'll be taking that list from another site so the product list stays updated. My portion of it will be the filter part so you can look for products that only work on your OS or your type of phone. almost like some of the categories, you see on the left when you search Amazon for something.

I hope that makes sense. I haven't started doing any coding yet cause I want to do my best to start the right way as opposed to having to change things after I have started and start over.

Steven Parker
Steven Parker
231,261 Points
Steven Parker
Steven Parker
231,261 Points

I'm not sure what you're concerned about "giving away", but there's no need for you to share any specific data. But once you get some code that at least displays some generic test items and criteria, sharing that will make it possible to help with the filter functionality.