I am trying to filter a HTML table that is dynamic that am pulling using Python to build the table. I would like to have a drop down to allow the user to select what region to see in the HTML table. After messing around I was able to find something using JavaScript to filter the table. It does filter out the data but it just hides all the rows instead of just showing the selection in the drop down. If I select the ‘all’ option in my drop down it will bring back all the rows. I am not sure why it can’t find the value from the drop down.

HTML:

      <p>Region:</p>
            <select id="regionFilter"  class='form-control'>
                <option value="North">North</option>
                <option value="South">South</option>
                <option value="Central">Central</option>
                <option value="all">All</option>
            </select> 
              
        <table id="table" class="table table-striped table-bordered" style="width:25%;font-family: tahoma !important;">
            <thead>                
                <tr>
                <th>Date</th>
                <th>Region</th>
                <th>Forecast</th>
                <th>Margin</th>
                </tr>
            </thead>
                <tbody>
                    {% for row in editresults %}  
                        <tr>
                            {% for cell in row %}
                                <td>{{ cell }}</td>
                            {% endfor %}
                        </tr>
                    {% endfor %}
                </tbody>
                       
        </table>

JavaScipt:

<script>
            function filterTable() {
                var selectedOption = document.getElementById("regionFilter").value;
                var tableRows = document.getElementById("table").getElementsByTagName("tr");

                for (var i = 1; i < tableRows.length; i++) {
                    var tableData = tableRows[i].getElementsByTagName("td");
                    var hideRow = true;

                if (selectedOption === "all") {
                     hideRow = false;
                } else if (tableData[2].innerHTML === selectedOption) {
                    hideRow = false;
                }

                if (hideRow) {
                    tableRows[i].style.display = "none";
                } else {
                    tableRows[i].style.display = "";
                }
                }
            }
            document.getElementById("regionFilter").addEventListener("change", filterTable);
        </script>

It seems like the filter is working because if I select any value other then ‘All’ in the drop down it will filter all the records. It almost seems like the values in the drop options don’t match the values in the table.

>Solution :

Have you checked the value of tableData[2].innerHTML? Arrays start at index 0, which would make the Region column [1] as the second column, not [2], like so:

} else if (tableData[1].innerHTML === selectedOption) {
    hideRow = false;
}