Querying an XML file using HTML

You could do this:

Add two script elements to your XSLT that will show up in the resulting HTML. The first will be jQuery (the Google-hosted version, for convenience):

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

and the second manipulates your result table:

<script type="text/javascript"><![CDATA[
$(function () {
  var filters = {};
  filters.run = function () {
    var i, $th = $("th"), $td, value;

    $("table tr:not(:visible)").show(); // clear any previously hidden rows

    for (var i=0; i<$th.length; i++) {  // for each filter string...
      if (this[i] > "") {
        $td = $th.eq(i).closest("table").find("tr:visible td:nth-child(" + (i+1) + ")");

        switch (this[i].slice(0,1)) { // first character is the operator
          case "<":
            value = $.trim( this[i].slice(1).toLowerCase() );
            $td.filter(function () {
              return $.trim( $(this).text().toLowerCase() ) >= value;
            }).closest("tr:visible").hide();
            break;
          case ">":
            value = $.trim( this[i].slice(1).toLowerCase() );
            $td.filter(function () {
              return $.trim( $(this).text().toLowerCase() ) <= value;
            }).closest("tr:visible").hide();
            break;
          case "/":
            value = new RegExp( this[i].slice(1) );
            $td.filter(function () {
              return !value.test( $.trim( $(this).text() ) );
            }).closest("tr:visible").hide();
            break;
          case "=":
            value = $.trim( this[i].slice(1).toLowerCase() );
            $td.filter(function () {
              return $.trim( $(this).text().toLowerCase() ) != value;
            }).closest("tr:visible").hide();
            break;
          default:
            value = $.trim( this[i].toLowerCase() );
            $td.filter(function () {
              return $.trim( $(this).text().toLowerCase() ).indexOf(value) == -1;
            }).closest("tr:visible").hide();
            break;
        }
      }
    }
  }

  $("th").each(function () {
    $(this).append("<input type='text'>");
  });

  $("th input").change(function () {
    var index = $(this).closest("th").prevAll("th").length;

    filters[index] = $.trim( $(this).val() );
    filters.run();
  });
});
]]></script>

Here's what this does:

1. It adds an <input> element to each <th>. This input serves as a filter box for that column.
2. It maintains a set of filters, one for each column index.
3. Whenever an input changes (the change event occurs when the field loses focus), it writes the field's value to the set of filters and runs the filter.
4. "Running the filter" means:
   1. It goes through each saved filter string, figures out which operator (if any) was used
   2. It finds all <td> elements in the affected column and compares them to the filter value.
   3. When the cell value does not match the filter, the associated <tr> is hidden.
   4. Repeat process for next column.

This process results in additive filters, i.e. you can narrow down your search, filtering each column individually.

The first character of the filter string is supposed to be the operator.

Supported operators are

• < (less than),
• > (greater than)
• = (exact equality)
• / (regular expression).
• Any other filter string is interpreted as "contains".
• Add more operators if you want.

All comparisons except regular expression are case-insensitive.

See it in action on jsFiddle: http://jsfiddle.net/Tomalak/wjDrr/1/embedded/result/

P.S.:

I know this basically solves your entire problem. You said you have no idea where to start, so I suppose you'll have a hard-enough time figuring out the code and further adapting it to your needs. :)

The above code lacks some elegance, it breaks as soon as there is more then one table on the page and it certainly can be optimized for speed. If you care, you can improve these things.