使用Java的html中的表格过滤器不起作用

时间:2018-07-05 21:22:10

标签: javascript html ruby-on-rails html-table display

我的HTML带有Javascript的表格过滤器不起作用。我正在尝试过滤从ruby on rails查询生成的表。我想通过第一列中的字段过滤表,我有一个代码尝试使用一个简单的表,它可以正常工作,但是在Rails html表中的ruby中使用相同的功能不起作用。我认为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";
    }
  }
 }

0 个答案:

没有答案