1

Сделал связную фильтрацию, для ввода текста в input. Подскажите пожалуйста, что нужно сделать чтобы код работал с выбранным значением из select Имеется таблица, пример со срокой ниже(остальные строки аналогичны).

<table class="table table-75" id="myTable">
    <thead>
        <tr class="header">
            <th>№</th>
            <th>Date</th>
            <th>Branch</th>
            <th class="nowrap">NRI BS</th>
            <th>Standard</th>
            <th>Total RCN</th>
            <th>Downtime W19</th>
            <th>% W19</th>
            <th>Downtime W20</th>
            <th>% W20</th>
            <th>Downtime W21</th>
            <th>% W21</th>
            <th>Reason <input type="text" placeholder="Search..."><span>X</span></th>
            <th>Comment</th>
            <th>Action</th>
            <th>Group <input type="text" placeholder="Search..."><span>X</span></th>
            <th>Responsible <input type="text" placeholder="Search..."><span>X</span></th>
            <th>Deadline</th>
        </tr>
    </thead>


    <tbody id="searchTable">
        <form name="form" id="form" class="form-inline" action="/report/sc_analysis/write" method="post"></form>
            <input type="hidden" name="user_id" value="149">
            <input type="hidden" name="period" value="2020-05-18">
            <input type="hidden" name="branch_id" value="15">

            <tr>    
                <td> 1</td>
                <td class="nowrap">2020-05-18 </td>
                <td class="nowrap">Kazan </td>
                <td> <a class="horizontal-menu" href="/report/sc_analysis/cells/all/15/2020-05-18/50481"> 50481 </a> </td>
                <td> 3 </td>
                <td> 100 </td>
                <td> 55987200 </td>
                <td> 23,09 </td>
                <td> 57888000 </td>
                <td> 5,85 </td>
                <td> 55900800 </td>
                <td> 22,16 </td>
                <td>
                    <select name="reason[Kazan_50481_3]" id="selectKazan_50481_3">
                        <option value="Нулевой" selected="">Нулевой</option>                        
                        <option value="Нулевой">Нулевой</option>
                        <option value="Оперативный">Оперативный</option>
                        <option value="Планирование">Планирование</option>
                        <option value="Правка в Глобус">Правка в Глобус</option>
                        <option value="Правка в NRI">Правка в NRI</option>
                        <option value="Правка в NIS">Правка в NIS</option>
                        <option value="Проблемная">Проблемная</option>
                        <option value="РИЧ">РИЧ</option>
                        <option value="СГОН">СГОН</option>
                        <option value="LTЕ сбой">LTЕ сбой</option>
                        <option value="Доп. анализ">Доп. анализ</option>
                    </select>
                </td>
                <td>
                    <textarea style="width: 250px;" title="Стадион" rows="1" name="comment[Kazan_50481_3]">Стадион</textarea> 
                </td>
                <td>
                    <textarea style="width: 250px;" title="RFC 555749/19 исп. Май" rows="1" name="action[Kazan_50481_3]">RFC 555749/19 исп. Май</textarea>
                </td>
                <td>
                    <input type="text" name="responsible_group[Kazan_50481_3]">
                </td>
                <td>
                    <input type="text" name="responsible[Kazan_50481_3]">
                </td>
                <td>
                    <input type="date" value="2020-05-31" name="deadline[Kazan_50481_3]">
                </td>                    
            </tr>         



    </tbody>
</table>

Вот пример javascript:

<script>



            table = document.getElementById('myTable');
            // Делегирование обработчика для полей ввода
            table.addEventListener('input', fResultFilter);
            // Назначение обработчиков для кнопок очистки
            [...table.querySelectorAll('.header input + span')].forEach(function(el) {
              el.addEventListener('click', function(ev) {
                ev.target.previousElementSibling.value = '';
                ev.target.previousElementSibling.dispatchEvent(new Event('input', { bubbles: true }));
              });
            });

            function fResultFilter(ev) {
              // Скрытие/показ кнопок очистки
              ev.target.nextElementSibling.style.transform = (ev.target.value != '') ? 'scaleX(1)' : '';
              // Получаем все строки, кроме заголовка
              let aTRs = [...table.querySelectorAll('tr:not(.header)')];
              // Получаем значения всех полей поиска
              let aSearch = [...table.querySelectorAll('th > input')];
              // Прогоняем строки через цепочку фильтров
              aTRs.filter(function(el) {
                          //console.log();
                if (el.children[12].childNodes[1][0].value.search(new RegExp(`${aSearch[0].value}`, 'i')) < 0) {
                  el.style.display = 'none';
                  return false;
                } else {
                  return true;
                }
              }).filter(function(el) {
                if (el.children[15].childNodes[1].value.search(new RegExp(`${aSearch[1].value}`, 'i')) < 0) {
                  el.style.display = 'none';
                  return false;
                } else {
                  return true;
                }
              }).filter(function(el) {
                          //console.log(el.children[16].childNodes[1].value);
                if (el.children[16].childNodes[1].value.search(new RegExp(`${aSearch[2].value}`, 'i')) < 0) {
                  el.style.display = 'none';
                  return false;
                } else {
                  // Показываем только нужные строки
                  el.style.display = '';
                  return true;
                }
              });
            }


        </script>

введите сюда описание изображения верску сделал, а на JS застрал... помогите советом, заранее спасибо!

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.