Фильтрация таблицы, заполненной БД, с помощью групп флажков

Question

У меня есть страница, которая содержит aws записей из базы данных и заполняет таблицу, применяя несколько соответствующих классов к каждой строке таблицы на основе этих полей записей - в частности, area / topi c, назначенного обработчик и статус прогресса. У меня есть форма с тремя группами флажков для фильтрации строк таблицы, чтобы пользователи могли сузить то, что они видят.

Первоначально я взял значение флажка (которое соответствует возможному классу строки) и просто переключал каждую строку с этим классом. Затем я попытался проверить значение и использовать показать или скрыть. В обоих случаях я обнаружил, что при обновлении видимых строк таблицы не будут учитываться какие-либо другие применяемые фильтры.

Например, я мог бы снять и установить флажок «Споры» в рабочей области фильтра, все в то время как Статус установлен только с установленным флажком «Открыто». Это скроет все записи «Споры», а затем отобразит все записи «Споры», независимо от того, установлено ли для них значение «Открыть» или нет.

Это общая c версия кода, которую я using (некоторые ярлыки изменены, но функционально те же). Единственное решение, которое я могу придумать, - это исчерпывающе кодировать все возможные комбинации - я уверен, что должен быть лучший способ сделать это, но я не нашел способа сделать это. Как я могу это сделать?

(Есть вероятность, что области, обработчики и т. Д. c. Могут быть обновлены в будущем, поэтому некоторая легкость обновления кода, если вообще будет, была бы полезна .)

<div class="container dashboard">
        <div class="row index_filter">
            <form id="filter-form">
                <div class="five columns">
                    <label>Filter Work Area:</label><hr />
                    <fieldset>
                        <label><input type="checkbox" name="filter-work-area[]" value="Busi" class="chk_work_area" checked /> Business &amp; Commercial</label>
                        <label><input type="checkbox" name="filter-work-area[]" value="Disp" class="chk_work_area" checked /> Disputes</label>
                        <label><input type="checkbox" name="filter-work-area[]" value="Empl" class="chk_work_area" checked /> Employment</label>
                        <label><input type="checkbox" name="filter-work-area[]" value="Fami" class="chk_work_area" checked /> Family</label>
                        <label><input type="checkbox" name="filter-work-area[]" value="Hous" class="chk_work_area" checked /> Housing</label>
                        <label><input type="checkbox" name="filter-work-area[]" value="Moto" class="chk_work_area" checked /> Motoring</label>
                        <label><input type="checkbox" name="filter-work-area[]" value="Pers" class="chk_work_area" checked /> Personal Injury</label>
                        <label><input type="checkbox" name="filter-work-area[]" value="Priv" class="chk_work_area" checked /> Private Client</label>
                        <label><input type="checkbox" name="filter-work-area[]" value="Othe" class="chk_work_area" checked /> Other</label>
                        <label><input type="checkbox" name="filter-work-area[]" value="Unkn" class="chk_work_area" checked /> Unkown</label>
                    </fieldset>
                </div>
                <div class="four columns">
                    <label>Filter Lead Handler:</label><hr />
                    <fieldset>
                        <label><input type="checkbox" name="filter-lead-handler[]" value="Handler_1" class="chk_lead_handler" checked /> Handler 1</label>
                        <label><input type="checkbox" name="filter-lead-handler[]" value="Handler_2" class="chk_lead_handler" checked /> Handler 2</label>
                        <label><input type="checkbox" name="filter-lead-handler[]" value="Handler_3" class="chk_lead_handler" checked /> Handler 3</label>
                        <label><input type="checkbox" name="filter-lead-handler[]" value="Handler_4" class="chk_lead_handler" checked /> Handler 4</label>
                    </fieldset>
                 </div>
                <div class="three columns">
                    <label>Filter Lead Status:</label><hr />
                    <fieldset>
                        <label><input type="checkbox" name="filter-lead-status[]" value="Open" class="chk_lead_status" checked /> Open</label>
                        <label><input type="checkbox" name="filter-lead-status[]" value="Converted" class="chk_lead_status" /> Converted</label>
                        <label><input type="checkbox" name="filter-lead-status[]" value="Closed" class="chk_lead_status" /> Closed</label>
                    </fieldset>
                </div>
            </form>
        </div>
        <div class="row index_buttons">
            <div class="twelve columns">
                <a class="button" href="javascript:window.print()" id="print-selected-leads">Print Selected Leads</a>
                <a class="button" href="#" id="toggle-filter-form">Toggle Filters</a>
            </div>
        </div>
        <hr />
        <div class="row">
            <div class="twelve columns">

                <?php

                // Check connection
                if($link === false){
                    die("ERROR: Could not connect. " . mysqli_connect_error());
                }

                $result = mysqli_query($link,"SELECT lead_id, file_ref, lead_name, work_area, lead_status, lead_handler, date_intake, latest_note FROM crs_leads");

                echo "<div class='leads leads_list_wrap'><table>
                <tr>
                  <th>Link</th>
                  <th>File Ref</th>
                  <th>Name</th>
                  <th>Work Area</th> 
                  <th>Intake Date</th>
                  <th>Lead Status</th>
                  <th>Lead Handler</th>
                  <th>Latest Note</th>
                </tr>";

                while($row = mysqli_fetch_array($result)) {
                    $row_class = substr( $row['work_area'], 0, 4 )  . ' ' . str_replace(' ', '_', $row['lead_status']) . ' ' . str_replace(' ', '_', $row['lead_handler']);
                    echo '<tr class="' . $row_class . '" >';

                    echo "<td><a href='single-lead.php?lead-id=" . $row['lead_id'] . "'><img src='assets/link-icon.png' style='width: 20px; height: auto;'></a></td>";
                    echo "<td>" . $row['file_ref'] . "</td>";
                    echo "<td>" . $row['lead_name'] . "</td>";
                    echo "<td>" . $row['work_area'] . "</td>";
                    echo "<td>" . $row['date_intake'] . "</td>";
                    echo "<td>" . $row['lead_status'] . "</td>";
                    echo "<td>" . $row['lead_handler'] . "</td>";
                    echo "<td>" . $row['latest_note'] . "</td>";
                    echo "</tr>";
                }
                echo "</table></div>";

                mysqli_close($link);

                ?>

            </div>
        </div>
    </div>

$( document ).ready(function() {

    $( "#filter-form" ).toggle();
    $( "tr.Converted" ).toggle();
    $( "tr.Closed" ).toggle();


    $( "#toggle-filter-form" ).click(function(e) {
        e.preventDefault();
        $( "#filter-form" ).toggle();
    });

    $( ".chk_work_area" ).click(function(e) {
        var chkValue =  "tr." + this.value;
        if ( true == this.checked ) {
            $( chkValue ).show();
        } else {
            $( chkValue ).hide();
        }
    });

    $( ".chk_lead_handler" ).click(function(e) {
        var chkValue =  "tr." + this.value;
        if ( true == this.checked ) {
            $( chkValue ).show();
        } else {
            $( chkValue ).hide();
        }
    });

    $( ".chk_lead_status" ).click(function(e) {
        var chkValue =  "tr." + this.value;
        if ( true == this.checked ) {
            $( chkValue ).show();
        } else {
            $( chkValue ).hide();
        }
    });

});