Home/ Questions/Q 6556609
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T12:58:00+00:00

I have a CGI script that generates an HTML table with an arbitrarily large

  • 0

I have a CGI script that generates an HTML table with an arbitrarily large number of rows, in an arbitrary order.

Each row is a member of one or more subsets, and there are 26 subsets total (26 representing a small relative constant).

While I am generating the page, I know which subsets each row belongs to, and can tag them in any way necessary.

I then wish to provide 26 buttons on the page with which the user can press any one of them to filter the table to that subset of rows. The order in which the rows appear is significant relative to each other, but no information is lost by hiding rows that do not belong to the subset the user desires to view.

The first priority is that the computations for the filtering are done client-side, not server-side, and the client does not re-request the page, as it is significant in size and the server is very busy doing other things. (read as: Javascript, right?) The page is not requested very often, but many filter operations are normally requested for each page request.

The second priority is that the client-side filtering is done as efficiently as possible. The dataset is very large.

The third priority is the widest possible browser interoperability.

I am not a web programmer by any stretch, if you can’t already tell.

I originally tried to do this by representing each tag as a CSS class, assigning multiple classes to each row as necessary, and then using JavaScript to modify the CSS definitions, but it started to give me a headache. If this works, I can’t quite figure it out.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    CSS way, check it out – JSFiddle
    And maybe someone could do something about ie6-7, if that matters.

    <!DOCTYPE html>
<html>
    <body>
        <style>
            #table tr { display: none }
            #table.all tr { display: table-row }
            #table.bar tr.bar { display: table-row }
            #table.foo tr.foo { display: table-row }
        </style>
        <input type="button" value="Foo" onclick="filter('foo')">
        <input type="button" value="Bar" onclick="filter('bar')">
        <table id="table" class="all">
            <tr class="foo"><td>1</td></tr>
            <tr class="bar"><td>2</td></tr>
            <tr class="foo bar"><td>3</td></tr>
        </table>
        <script type="text/javascript">
            var table = document.getElementById('table')
            function filter (cat) {
                table.className = cat
            }
        </script>
    </body>
</html>
    • 0