Skip to main content
100%

Table with Filter

✓ Published0🌍 Public
HHéctor del Castillo
Last edited Feb 20, 2023
Created on Feb 20, 2023
Forked from HTML Starter

A table of names, ages, and cities allows filtering its rows through interactive dropdown menus placed in the header. Selecting a value from any menu hides rows that do not match the chosen text in that column, while multiple selections combine to show only rows meeting all criteria. The implementation uses jQuery to listen for `change` events on the `.filter` selects, reads each menu’s `data-column` attribute to locate the corresponding table cell, and toggles row visibility by calling `hide()` and `show()` on the filtered `<tbody>` elements. All data is hardcoded within the HTML file.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes