Скрытие строк таблицы на основе выбранных элементов в 2 раскрывающихся списках - PullRequest
Новая
       9

Скрытие строк таблицы на основе выбранных элементов в 2 раскрывающихся списках

0 голосов
/ 01 октября 2018

Я надеюсь, что кто-то здесь сможет помочь мне, я пытаюсь создать список приложений и серверов, которые можно отфильтровать с помощью 2 раскрывающихся списков (из-за того, что данных более 100 строк)в таблице.

До сих пор я получал отфильтрованную таблицу либо по имени приложения, либо по функции сервера, и теперь я хочу, чтобы таблица работала так, чтобы она фильтровала по выборкам ОБА.

Так что в настоящее время, если я выберу APP1 в первом раскрывающемся списке, он покажет все записи для APP1, однако, если я попытаюсь выбрать сервер БД, он покажет ВСЕ приложения, которые имеют серверы БД, вместо того, чтобы просто показывать серверы БД APP1.

Я не могу предоставить тело / содержимое таблицы из-за политики компании, но я предоставил хотя бы первую строку, в которой были бы заголовки.

Я не могу получить доступ к jfiddle или чему-либо подобному, чтобы датьрабочий пример, поскольку он заблокирован компанией, в которой я работаю.

Надеюсь, у меня есть информацияЭтого будет достаточно.

Заранее спасибо. 

$(document).ready(function () {

$("#application").on("change",
               function(){
                   var appName = $(this).find("option:selected").html();

                   $("table tr td:first-child").each(
                       function(){
                           if($(this).html() != appName){
                               $(this).parent().hide();
                           }
                           else{
                               $('#titles').show();
                               $(this).parent().show();
                           }
                       });
               });

$("#function").on("change",
               function(){
                   var functionName = $(this).find("option:selected").html();

                   $("table tr td:first-child").next().each(
                       function(){
                           if($(this).html() != functionName){
                               $(this).parent().hide();
                           }
                           else{
                               $('#titles').show();
                               $(this).parent().show();
                           }
                       });
               });
               });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div title="Select Application"">
<strong>Select Application</strong><br>
<select id="application" class="form-control selectpicker">
    <option value="">--Select--</option>
    <option value="">APP1</option>
    <option value="">APP2</option>
    <option value="">APP3</option>
    <option value="">APP4</option>
    <option value="">APP5</option>
    <option value="">APP6</option>
    <option value="">APP7</option>
    <option value="">APP8</option>
    <option value="">APP9</option>
    <option value="">APP10</option>
    <option value="">APP11</option>
    <option value="">APP12</option>
</select>
</div>
<br>
<div title="Select Server Function"">
<strong>Select Application</strong><br>
<select id="function" class="form-control selectpicker">
    <option value="">--Select--</option>
    <option value="">DB Server</option>
    <option value="">Automate Job Server</option>
    <option value="">Web Server</option>
    <option value="">Application Server</option>
    <option value="">Database & Application Server</option>
    <option value="">Citrix Server</option>
    <option value="">Inbound/Outbound Server</option>
    <option value="">COMMS Server</option>
    <option value="">WEBFARM Servers</option>
    <option value="">WAS Instances</option>
    <option value="">APP/Web Server</option>
    <option value="">Autosys</option>
    <option value="">Qlik Sense Server</option>
</select>
</div>
<br>
<table style="width: 733.38px;" class=">
<tbody>
<tr style="height: 20px;" id="titles";>
<td style="width: 147px; height: 20px;"><strong>Application Name</strong></td>
<td style="width: 162px; height: 20px;"><strong>Function</strong></td>
<td style="width: 256px; height: 20px;"><strong>Server Name</strong></td>
<td style="width: 138.38px; height: 20px;"><strong>ENVIRONMENT</strong></td>
</tr>
<tr style="height: 20px;">
<td style="width: 147px; height: 20px;">APP1</td>
<td style="width: 162px; height: 20px;">DB Server</td>
<td style="width: 256px; height: 20px;">ServerName</td>
<td style="width: 138.38px; height: 20px;">PROD</td>
</tr>
<tr style="height: 20.5px;">
<td style="width: 147px; height: 20.5px;">APP1</td>
<td style="width: 162px; height: 20.5px;">App Server</td>
<td style="width: 256px; height: 20.5px;">ServerName</td>
<td style="width: 138.38px; height: 20.5px;">COB</td>
</tr>
<tr style="height: 20px;">
<td style="width: 147px; height: 20px;">APP2</td>
<td style="width: 162px; height: 20px;">DB Server</td>
<td style="width: 256px; height: 20px;">ServerName</td>
<td style="width: 138.38px; height: 20px;">UAT</td>
</tr>
<tr style="height: 20px;">
<td style="width: 147px; height: 20px;">APP3</td>
<td style="width: 162px; height: 20px;">DB Server</td>
<td style="width: 256px; height: 20px;">ServerName</td>
<td style="width: 138.38px; height: 20px;">PROD</td>
</tr>

1 Ответ

0 голосов
/ 01 октября 2018

Вы должны добавить некоторые условия.Второго совпадения в раскрывающемся списке недостаточно, вы сначала проверяете совпадение во втором раскрывающемся списке.Я добавил второе условие, как это в блоке if. 

$("#application").find("option:selected").html() != $(this).prev().html();

Полный код: 

$("#function").on("change",
               function(){
                   var functionName = $(this).find("option:selected").html();
                   $("table tr td:first-child").next().each(
                           function(){
                               if($(this).html() != functionName || $("#application").find("option:selected").html() != $(this).prev().html()){
                                   $(this).parent().hide();
                               }
                               else{
                                   $('#titles').show();
                                   $(this).parent().show();
                               }
                           });
                     });
               });
...