Фильтровать несколько таблиц HTML из нескольких входов - PullRequest
Новая
       17

Фильтровать несколько таблиц HTML из нескольких входов

0 голосов
/ 19 декабря 2018

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

<!-- First Table with One input -->
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for products.." title="Type in a name">

<table id="myTable">

    <tr class="header">
    <th style="width:50%;">Name</th>
    <th style="width:30%;">Pack Size</th>
    <th style="width:20%;">Amount</th>
    </tr>
    <tr>
    <td><a href="#">Aluminium Hyperhydrosis Spray</a></td>
    <td>50ml</td>
    <td>Rs.</td>
    </tr>    
</table>


<!-- Second Table with One input -->
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for products.." title="Type in a name">

<table id="myTable">

    <tr class="header">
    <th style="width:50%;">Name</th>
    <th style="width:30%;">Pack Size</th>
    <th style="width:20%;">Amount</th>
    </tr>
    <tr>
    <td>Anti Lice Shampoo</td>
    <td>20ml</td>
    <td>Rs.</td>
    </tr>
</table>

<script>
function myFunction() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
}
</script>

1 Ответ

0 голосов
/ 19 декабря 2018

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

const minLength = 2;

const query = (query, table) => {
  Array.prototype.slice.call(table.querySelectorAll("tr")).map(tr => {
    const s = tr.textContent.toLowerCase(), q = query.toLowerCase();
    let style = 'none';

    (s == q || s.indexOf(q) > -1) && q.length > minLength ? style = 'block' :
      q.length <= minLength ? style = 'block' : style = 'none';
		
    if (tr.className.indexOf('header') == -1) {
    	tr.style.display = style;
    }
  });
};

const keyUpHandler = (e) => {
  const tbl = document.querySelector(e.target.getAttribute("data-table"));
  query(e.target.value, tbl);
};

const dispatchEvents = () => {
  Array.prototype.slice.call(document.querySelectorAll("input[type='text']")).map(i => {
    i.onkeyup = keyUpHandler;
  });
};

const launch = () => {
  console.log('Launching...');
  dispatchEvents();
};

launch();
<!-- First Table with One input -->
<input type="text" placeholder="Search for products.." title="Type in a name" data-table="#table1">

<table id="table1">

  <tr class="header">
    <th style="width:50%;">Name</th>
    <th style="width:30%;">Pack Size</th>
    <th style="width:20%;">Amount</th>
  </tr>
  <tr>
    <td><a href="#">Aluminium Hyperhydrosis Spray</a></td>
    <td>50ml</td>
    <td>Rs.</td>
  </tr>
</table>


<!-- Second Table with One input -->
<input type="text" placeholder="Search for products.." title="Type in a name" data-table="#table2">

<table id="table2">

  <tr class="header">
    <th style="width:50%;">Name</th>
    <th style="width:30%;">Pack Size</th>
    <th style="width:20%;">Amount</th>
  </tr>
  <tr>
    <td>Anti Lice Shampoo</td>
    <td>20ml</td>
    <td>Rs.</td>
  </tr>
</table>
...