Фильтровать таблицу на основе содержимого в столбце таблицы - PullRequest
Новая
       10

Фильтровать таблицу на основе содержимого в столбце таблицы

0 голосов
/ 05 августа 2020

У меня огромная таблица, и я хочу отфильтровать строку на основе данных в примере второго и пятого столбца. Я хочу показать только строку, которая получает данные о состоянии, как Karnataka <td data-label="Receiving State / UT">Karnataka</td> и Origin как Dubai <td data-label="Origin">Kochi</td>

Для этого я нашел скрипт, который фильтрует таблицу на основе ввода, потому что я добавил два поля ввода: одно для пункта назначения, а второе для объекта. на обоих входах 

<tr height="21">
<td data-label="VBM PHASE 5 (as on 04 August 2020)No." height="21">939</td>
<td data-label="Receiving State / UT">Karnataka</td>
<td data-label="Country of Origin">NA</td>
<td data-label="Flight No.">AI 1174</td>
<td data-label="Origin">Kochi</td>
<td data-label="Dep Date">30-Aug-20</td>
<td data-label="Dep Time">20:00</td>
<td data-label="Destination">Bengaluru</td>
<td data-label="Arrv Date">30-Aug-20</td>
<td data-label="Arrv Time">21:00</td>
<td data-label="Capacity">149</td>
<td data-label="Remarks">FEEDER</td>
</tr>

Ссылка Codepen https://codepen.io/KGuide/pen/gOrOmeB

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

<div class="tableOut"><table class="tableData responsiveTable tbaleScrollPhone" width="100%" cellspacing="0" cellpadding="0">
<caption class="displayNone"></caption>
<thead>
<tr class="evenRow">
</tr>
<tr height="20">
<th colspan="12" style="text-align:center" height="20">VBM PHASE 5 (as on 04 August 2020)</th>
</tr>
<tr class="evenRow">
<th>No.</th>
<th width="92">Receiving State / UT</th>
<th>Country of Origin</th>
<th>Flight No.</th>
<th>Origin</th>
<th>Dep Date</th>
<th>Dep Time</th>
<th>Destination</th>
<th>Arrv Date</th>
<th>Arrv Time</th>
<th>Capacity</th>
<th>Remarks</th>
</tr>
<tr height="21">
<td data-label="VBM PHASE 5 (as on 04 August 2020)No." height="21">1</td>
<td data-label="Receiving State / UT">Delhi</td>
<td data-label="Country of Origin">Australia</td>
<td data-label="Flight No.">AI 0301</td>
<td data-label="Origin">Sydney</td>
<td data-label="Dep Date">9-Aug-20</td>
<td data-label="Dep Time">10:30</td>
<td data-label="Destination">Delhi</td>
<td data-label="Arrv Date">9-Aug-20</td>
<td data-label="Arrv Time">19:20</td>
<td data-label="Capacity">243</td>
<td data-label="Remarks"></td>
</tr>
<tr class="evenRow" height="21">
<td data-label="VBM PHASE 5 (as on 04 August 2020)No." height="21">2</td>
<td data-label="Receiving State / UT">Delhi</td>
<td data-label="Country of Origin">Australia</td>
<td data-label="Flight No.">AI 0309</td>
<td data-label="Origin">Melbourne</td>
<td data-label="Dep Date">6-Aug-20</td>
<td data-label="Dep Time">10:00</td>
<td data-label="Destination">Delhi</td>
<td data-label="Arrv Date">6-Aug-20</td>
<td data-label="Arrv Time">18:25</td>
<td data-label="Capacity">243</td>
<td data-label="Remarks"></td>
</tr>
<tr height="21">
<td data-label="VBM PHASE 5 (as on 04 August 2020)No." height="21">3</td>
<td data-label="Receiving State / UT">Delhi</td>
<td data-label="Country of Origin">Bahrain</td>
<td data-label="Flight No.">AI 0940</td>
<td data-label="Origin">Bahrain</td>
<td data-label="Dep Date">4-Aug-20</td>
<td data-label="Dep Time">13:10</td>
<td data-label="Destination">Delhi</td>
<td data-label="Arrv Date">4-Aug-20</td>
<td data-label="Arrv Time">19:45</td>
<td data-label="Capacity">168</td>
<td data-label="Remarks"></td>
</tr>
<tr class="evenRow" height="21">
<td data-label="VBM PHASE 5 (as on 04 August 2020)No." height="21">4</td>
<td data-label="Receiving State / UT">Tamil Nadu</td>
<td data-label="Country of Origin">Bahrain</td>
<td data-label="Flight No.">AI 1908</td>
<td data-label="Origin">Bahrain</td>
<td data-label="Dep Date">4-Aug-20</td>
<td data-label="Dep Time">13:00</td>
<td data-label="Destination">Chennai</td>
<td data-label="Arrv Date">4-Aug-20</td>
<td data-label="Arrv Time">20:25</td>
<td data-label="Capacity">149</td>
<td data-label="Remarks"></td>
</tr>
<tr height="21">
<td data-label="VBM PHASE 5 (as on 04 August 2020)No." height="21">5</td>
<td data-label="Receiving State / UT">Delhi</td>
<td data-label="Country of Origin">Bahrain</td>
<td data-label="Flight No.">AI 0940</td>
<td data-label="Origin">Bahrain</td>
<td data-label="Dep Date">6-Aug-20</td>
<td data-label="Dep Time">13:10</td>
<td data-label="Destination">Delhi</td>
<td data-label="Arrv Date">6-Aug-20</td>
<td data-label="Arrv Time">19:45</td>
<td data-label="Capacity">168</td>
<td data-label="Remarks"></td>
</tr>
<tr class="evenRow" height="21">
<td data-label="VBM PHASE 5 (as on 04 August 2020)No." height="21">6</td>
<td data-label="Receiving State / UT">Kerala</td>
<td data-label="Country of Origin">Bahrain</td>
<td data-label="Flight No.">IX 1474</td>
<td data-label="Origin">Bahrain</td>
<td data-label="Dep Date">5-Aug-20</td>
<td data-label="Dep Time">13:00</td>
<td data-label="Destination">Kochi</td>
<td data-label="Arrv Date">5-Aug-20</td>
<td data-label="Arrv Time">20:10</td>
<td data-label="Capacity">177</td>
<td data-label="Remarks"></td>
</tr>
<tr height="21">
<td data-label="VBM PHASE 5 (as on 04 August 2020)No." height="21">7</td>
<td data-label="Receiving State / UT">Kerala</td>
<td data-label="Country of Origin">Bahrain</td>
<td data-label="Flight No.">IX 1376</td>
<td data-label="Origin">Bahrain</td>
<td data-label="Dep Date">6-Aug-20</td>
<td data-label="Dep Time">12:35</td>
<td data-label="Destination">Kozhikode</td>
<td data-label="Arrv Date">6-Aug-20</td>
<td data-label="Arrv Time">19:25</td>
<td data-label="Capacity">177</td>
<td data-label="Remarks"></td>
</tr>
<tr class="evenRow" height="21">
<td data-label="VBM PHASE 5 (as on 04 August 2020)No." height="21">8</td>
<td data-label="Receiving State / UT">Kerala</td>
<td data-label="Country of Origin">Bahrain</td>
<td data-label="Flight No.">IX 1474</td>
<td data-label="Origin">Bahrain</td>
<td data-label="Dep Date">12-Aug-20</td>
<td data-label="Dep Time">13:00</td>
<td data-label="Destination">Kochi</td>
<td data-label="Arrv Date">12-Aug-20</td>
<td data-label="Arrv Time">20:10</td>
<td data-label="Capacity">177</td>
<td data-label="Remarks"></td>
</tr>
<tr height="21">
<td data-label="VBM PHASE 5 (as on 04 August 2020)No." height="21">9</td>
<td data-label="Receiving State / UT">Kerala</td>
<td data-label="Country of Origin">Bahrain</td>
<td data-label="Flight No.">IX 1376</td>
<td data-label="Origin">Bahrain</td>
<td data-label="Dep Date">13-Aug-20</td>
<td data-label="Dep Time">12:35</td>
<td data-label="Destination">Kozhikode</td>
<td data-label="Arrv Date">13-Aug-20</td>
<td data-label="Arrv Time">19:25</td>
<td data-label="Capacity">177</td>
<td data-label="Remarks"></td>
</tr>
<tr class="evenRow" height="21">
<td data-label="VBM PHASE 5 (as on 04 August 2020)No." height="21">10</td>
<td data-label="Receiving State / UT">Kerala</td>
<td data-label="Country of Origin">Bahrain</td>
<td data-label="Flight No.">IX 1376</td>
<td data-label="Origin">Bahrain</td>
<td data-label="Dep Date">16-Aug-20</td>
<td data-label="Dep Time">12:35</td>
<td data-label="Destination">Kozhikode</td>
<td data-label="Arrv Date">16-Aug-20</td>
<td data-label="Arrv Time">19:25</td>
<td data-label="Capacity">177</td>
<td data-label="Remarks"></td>
</tr>
<tr height="21">
<td data-label="VBM PHASE 5 (as on 04 August 2020)No." height="21">11</td>
<td data-label="Receiving State / UT">Karnataka</td>
<td data-label="Country of Origin">Bahrain</td>
<td data-label="Flight No.">IX 1890</td>
<td data-label="Origin">Bahrain</td>
<td data-label="Dep Date">18-Aug-20</td>
<td data-label="Dep Time">17:00</td>
<td data-label="Destination">Mangaluru</td>
<td data-label="Arrv Date">18-Aug-20</td>
<td data-label="Arrv Time">23:35</td>
<td data-label="Capacity">177</td>
<td data-label="Remarks"></td>
</tr>
<tr class="evenRow" height="21">
<td data-label="VBM PHASE 5 (as on 04 August 2020)No." height="21">12</td>
<td data-label="Receiving State / UT">Kerala</td>
<td data-label="Country of Origin">Bahrain</td>
<td data-label="Flight No.">IX 1474</td>
<td data-label="Origin">Bahrain</td>
<td data-label="Dep Date">19-Aug-20</td>
<td data-label="Dep Time">13:00</td>
<td data-label="Destination">Kochi</td>
<td data-label="Arrv Date">19-Aug-20</td>
<td data-label="Arrv Time">20:10</td>
<td data-label="Capacity">177</td>
<td data-label="Remarks"></td>
</tr>
<tr height="21">
<td data-label="VBM PHASE 5 (as on 04 August 2020)No." height="21">13</td>
<td data-label="Receiving State / UT">Kerala</td>
<td data-label="Country of Origin">Bahrain</td>
<td data-label="Flight No.">IX 1376</td>
<td data-label="Origin">Bahrain</td>
<td data-label="Dep Date">20-Aug-20</td>
<td data-label="Dep Time">12:35</td>
<td data-label="Destination">Kozhikode</td>
<td data-label="Arrv Date">20-Aug-20</td>
<td data-label="Arrv Time">19:25</td>
<td data-label="Capacity">177</td>
<td data-label="Remarks"></td>
</tr>
<tr class="evenRow" height="21">
<td data-label="VBM PHASE 5 (as on 04 August 2020)No." height="21">14</td>
<td data-label="Receiving State / UT">Kerala</td>
<td data-label="Country of Origin">Bahrain</td>
<td data-label="Flight No.">IX 1376</td>
<td data-label="Origin">Bahrain</td>
<td data-label="Dep Date">23-Aug-20</td>
<td data-label="Dep Time">12:35</td>
<td data-label="Destination">Kozhikode</td>
<td data-label="Arrv Date">23-Aug-20</td>
<td data-label="Arrv Time">19:25</td>
<td data-label="Capacity">177</td>
<td data-label="Remarks"></td>
</tr>
<tr height="21">
<td data-label="VBM PHASE 5 (as on 04 August 2020)No." height="21">15</td>
<td data-label="Receiving State / UT">Karnataka</td>
<td data-label="Country of Origin">Bahrain</td>
<td data-label="Flight No.">IX 1890</td>
<td data-label="Origin">Bahrain</td>
<td data-label="Dep Date">25-Aug-20</td>
<td data-label="Dep Time">12:00</td>
<td data-label="Destination">Mangaluru</td>
<td data-label="Arrv Date">25-Aug-20</td>
<td data-label="Arrv Time">18:35</td>
<td data-label="Capacity">177</td>
<td data-label="Remarks"></td>
</tr>
<tr class="evenRow" height="21">
<td data-label="VBM PHASE 5 (as on 04 August 2020)No." height="21">16</td>
<td data-label="Receiving State / UT">Kerala</td>
<td data-label="Country of Origin">Bahrain</td>
<td data-label="Flight No.">IX 1474</td>
<td data-label="Origin">Bahrain</td>
<td data-label="Dep Date">26-Aug-20</td>
<td data-label="Dep Time">13:00</td>
<td data-label="Destination">Kochi</td>
<td data-label="Arrv Date">26-Aug-20</td>
<td data-label="Arrv Time">20:10</td>
<td data-label="Capacity">177</td>
<td data-label="Remarks"></td>
</tr>
<tr height="21">
<td data-label="VBM PHASE 5 (as on 04 August 2020)No." height="21">17</td>
<td data-label="Receiving State / UT">Kerala</td>
<td data-label="Country of Origin">Bahrain</td>
<td data-label="Flight No.">IX 1376</td>
<td data-label="Origin">Bahrain</td>
<td data-label="Dep Date">27-Aug-20</td>
<td data-label="Dep Time">12:35</td>
<td data-label="Destination">Kozhikode</td>
<td data-label="Arrv Date">27-Aug-20</td>
<td data-label="Arrv Time">19:25</td>
<td data-label="Capacity">177</td>
<td data-label="Remarks"></td>
</tr>
<tr class="evenRow" height="21">
<td data-label="VBM PHASE 5 (as on 04 August 2020)No." height="21">18</td>
<td data-label="Receiving State / UT">Kerala</td>
<td data-label="Country of Origin">Bahrain</td>
<td data-label="Flight No.">IX 1790</td>
<td data-label="Origin">Bahrain</td>
<td data-label="Dep Date">28-Aug-20</td>
<td data-label="Dep Time">12:35</td>
<td data-label="Destination">Kannur</td>
<td data-label="Arrv Date">28-Aug-20</td>
<td data-label="Arrv Time">19:25</td>
<td data-label="Capacity">177</td>
<td data-label="Remarks"></td>
</tr>
<tr height="21">
<td data-label="VBM PHASE 5 (as on 04 August 2020)No." height="21">19</td>
<td data-label="Receiving State / UT">Maharashtra</td>
<td data-label="Country of Origin">Bahrain</td>
<td data-label="Flight No.">IX 1258</td>
<td data-label="Origin">Bahrain</td>
<td data-label="Dep Date">28-Aug-20</td>
<td data-label="Dep Time">14:15</td>
<td data-label="Destination">Mumbai</td>
<td data-label="Arrv Date">28-Aug-20</td>
<td data-label="Arrv Time">20:20</td>
<td data-label="Capacity">177</td>
<td data-label="Remarks"></td>
</tr>
<tr class="evenRow" height="21">
<td data-label="VBM PHASE 5 (as on 04 August 2020)No." height="21">20</td>
<td data-label="Receiving State / UT">Delhi</td>
<td data-label="Country of Origin">Bangladesh</td>
<td data-label="Flight No.">AI 1232</td>
<td data-label="Origin">Dhaka</td>
<td data-label="Dep Date">13-Aug-20</td>
<td data-label="Dep Time">13:00</td>
<td data-label="Destination">Delhi</td>
<td data-label="Arrv Date">13-Aug-20</td>
<td data-label="Arrv Time">15:15</td>
<td data-label="Capacity">169</td>
<td data-label="Remarks"></td>
</tr>

<tr class="evenRow" height="21">
<td data-label="VBM PHASE 5 (as on 04 August 2020)No." height="21">938</td>
<td data-label="Receiving State / UT">Gujarat</td>
<td data-label="Country of Origin">NA</td>
<td data-label="Flight No.">AI 1102</td>
<td data-label="Origin">Mumbai</td>
<td data-label="Dep Date">30-Aug-20</td>
<td data-label="Dep Time">19:25</td>
<td data-label="Destination">Ahmedabad</td>
<td data-label="Arrv Date">30-Aug-20</td>
<td data-label="Arrv Time">20:45</td>
<td data-label="Capacity">149</td>
<td data-label="Remarks">FEEDER</td>
</tr>
<tr height="21">
<td data-label="VBM PHASE 5 (as on 04 August 2020)No." height="21">939</td>
<td data-label="Receiving State / UT">Karnataka</td>
<td data-label="Country of Origin">NA</td>
<td data-label="Flight No.">AI 1174</td>
<td data-label="Origin">Kochi</td>
<td data-label="Dep Date">30-Aug-20</td>
<td data-label="Dep Time">20:00</td>
<td data-label="Destination">Bengaluru</td>
<td data-label="Arrv Date">30-Aug-20</td>
<td data-label="Arrv Time">21:00</td>
<td data-label="Capacity">149</td>
<td data-label="Remarks">FEEDER</td>
</tr>
</thead>
</table></div>

Обновление: я нашел сценарий, который можно использовать для поиска в таблицах на основе любого столбца, который я могу выбрать в функции, поэтому я создал два поля ввода и две функции таким образом он частично работает и фильтрует данные на основе любой из двух функций, в то время как я хочу, чтобы данные фильтровались в обоих полях ввода синхронно c

function myFunction() {
  // Declare variables
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");

  filter = input.value.toUpperCase();

  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[1];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}


function myFunction2() {
  // Declare variables
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput2");

  filter = input.value.toUpperCase();

  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[4];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

1 Ответ

1 голос
/ 05 августа 2020

Вы можете перебирать каждую строку, а затем найти вызов таблицы с вашим значением. Если значение найдено, скройте строку.

Передайте параметры в функции filterData ( Состояние получения / UT, Origin )

Отметьте Pen здесь: https://codepen.io/foodiepanda/pen/OJNJmjP

$(document).ready(function(){
  filterData("Karnataka","Dubai");
});

function filterData(s,u)
{
  $(".tableOut").find("table tr").each(function(x,y){
      if(x>2) //To exclude headers
      {
          $(this).hide();
          if($($(this).find("td")[1]).text() == s && $($(this).find("td")[4]).text() == u)
          {
              $(this).show();
          }
      }
  });
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...