Home/ Questions/Q 3623690
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T23:24:53+00:00

I have a really large table (around 32 columns and 1000+ rows) which I’m

  • 0

I have a really large table (around 32 columns and 1000+ rows) which I’m trying to filter using a drop down box.

The table takes a relatively standard format (this one has been redacted for simplicity):

<div id="SearchResults">
<table>
<thead>
<tr>
<th>Report Name</th>
<th>xxxxx Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sales_Report_Week_#</td>
<td>Sales Volume</td>
</tr>
</tbody>
</table>

The drop down box has already been assembled like so:

<select name="Report_Name_Drop" id="id_dropdown"> 
<option>xxxxx1</option>
<option>xxxxx2</option> 
<option>xxxxx3</option>
<option>xxxxx4</option> 
<option>xxxxx5</option> </select>

Unfortunately I’m working within a severely locked down sharepoint environement meaning I am unable to use any plug ins. I simply need to hide all rows which do not match the value in the drop down box but I can’t for love nor money figure out how!

Any help would be greatly appreciated!

Thanks,

James

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try something like this. Basically I create a set of the values in the filter column, and add those values to the <select> dropdown. Then when that dropdown changes I hide/show the relevant rows in the table. This pattern can be extended to include multiple filters as needed, just test all the relevant columns against all the relevent <select> elements.

    <!DOCTYPE HTML>
<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(function() {
        var vals = {};
        $('tbody tr').each(function(i){
            var t = $(this).find('td:first-child').text();
            vals[t] = t;
        });
        $.each(vals, function() {
            $('select').append($('<option value="' + this +'">' + this +'</option>'));
        });
        $('select').change(function() {
            var val= $(this).val();
            if (val != '-') {
              $('tbody tr').each(function(i){
                  if ($(this).find('td:first-child').text() != val) {
                    $(this).hide();
                  } else {
                    $(this).show();
                  }
              });
            } else {
              $('tbody tr').each(function(i){
                  $(this).show();
              });
            }
        });
    });
    </script>
  </head>
  <body>
    <select><option value="-"> === Filter === </option></select>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Value</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>Mark</td><td>12</td></tr>
        <tr><td>Mark</td><td>1</td></tr>
        <tr><td>Daryl</td><td>2</td></tr>
        <tr><td>Larry</td><td>122</td></tr>
        <tr><td>Kevin</td><td>132</td></tr>
        <tr><td>Larry</td><td>1232</td></tr>
        <tr><td>Kevin</td><td>1432</td></tr>
      </tbody>
    </table>

  </body>
</html>
    • 0