Фильтр таблиц в HTML с Javascript не работает - PullRequest
Новая
       32

Фильтр таблиц в HTML с Javascript не работает

0 голосов
/ 06 июля 2018

Мой табличный фильтр в html с Javascript не работает. Я пытаюсь отфильтровать таблицу, сгенерированную из запроса ruby ​​на rails. Я хочу отфильтровать таблицу по полям в первом столбце, у меня есть код, который я попытался с простой таблицей, и она работает нормально, но использование той же функции в таблице ruby ​​на рельсах HTML-таблица не работает. Я думаю tr [i] .style.display = "none"; Это не работает, но я не уверен. Когда я запускаю фильтр, таблица перезаряжается, но остается прежней. 

<table id = "myTable" class="table table-hover table-bordered">
      <thead>
        <tr align="justify-center">
          <th>Pais</th>
          <th>Jugador</th>
          <th>Partido</th>
          <th>Minuto</th>
          <th>Tarjeta</th>
        </tr>
      </thead>
      <tbody>
        <tr align = "center">
          <td> Alemania </td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>

        <% @tarjetasAmarilla.each do |tarjAm| %>
          <tr align="center">
            <td><%= tarjAm.player.country.nombre %></td>
            <td><%= tarjAm.player.nombre %> <%= tarjAm.player.apellido 
 %> </td>
            <td><%= @calendarios[tarjAm.match.calendar.id-1] 
  [0].country.nombre %> - <%= @calendarios[tarjAm.match.calendar.id-1] 
  [1].country.nombre %></td>
            <td><%= tarjAm.minuto %>'</td>
            <td><span class ="fa fa-sticky-note" style="color:yellow"> 
  </span></td>
          </tr>
        <% end %>
          <% @tarjetasRojas.each do |tarjAm| %>
            <tr align="center">
              <td><%= tarjAm.player.country.nombre %></td>
              <td><%= tarjAm.player.nombre %> <%= 
  tarjAm.player.apellido %> </td>
              <td><%= @calendarios[tarjAm.match.calendar.id-1] 
  [0].country.nombre %> - <%= @calendarios[tarjAm.match.calendar.id-1] 
  [1].country.nombre %></td>
              <td><%= tarjAm.minuto %>'</td>
              <td><span class ="fa fa-sticky-note" style="color:red"> 
 </span></td>
            </tr>
          <% end %>
      </tbody>
    </table>

Javascript 

  function myFunction(id) {
  var input, filter, table, tr, td, i, j, visible;
  input = document.getElementById(id);
  filter = input.id.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");

  for (i = 1; i < tr.length; i++) {
    visible = false;

    td = tr[i].getElementsByTagName("td");
    if (td[0] && td[0].innerHTML.toUpperCase().indexOf(filter) > -1) {
         visible = true;
    }else {
         visible = false;
    }

    if (visible === true) {
       tr[i].style.display = "";
    } else {
       tr[i].style.display = "none";
    }
  }
 }
...