Таблица фильтра с CSS и JS - PullRequest
0 голосов
/ 30 января 2020

У меня есть динамическая c таблица, которую я отображаю во внешнем интерфейсе следующим образом:

 <table id ="tblRE">
    <tr class="row">
      <th ng-repeat="column in cols_re">{{column}}</th>
    </tr>

    <tr ng-repeat="row in data['dict_re']">
      <td ng-repeat="column in cols_re">{{row[column]}}</td>
    </tr>  
  </table>

Я хочу поместить фильтр в один из столбцов с именем OUT (мой второй столбец из таблицы).

Если бы у меня было имя столбца исправления, я бы сделал так:

<tr class="row">
     <td class="head" ng-click="sortData='OUT';sortOrder=!sortOrder"> OUT</td>
</tr>

<tr ng-repeat="item in data.table_df| orderBy:sortData:sortOrder | filter:filter ">
    <td>{{ item.OUT}}</td>
</tr>

Есть ли вариант, как я могу установить фильтр с мой первоначальный вариант?

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

Код для кнопки поиска:

js:

function searchre() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("tblRE");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
}

и в HTML :

<input class="myInput" type="text" id="myInput" onkeyup="searchre()" placeholder="Search.." title="Type in a name">

Есть идеи о том, как фильтровать первый и второй столбцы?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...