Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Table with Filter

Public visualization

Viewing a saved revision (read-only)

9b656072f7e746e299d1715942d3d5be

Table with Filter

0 stars0🌍 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.