使用Javascript

Question

我对ruby和javascript都很陌生，目前正在尝试将搜索添加到表格中。

有没有办法让这段代码有效？ 当我用表格加载页面时，我会在表格中看到结果，但是，一旦我开始搜索，它们就会消失。

    <div class="container">

  <div class="page-header">
    <h3>Order List</h3>
  </div>

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">

  <table id="myTable">
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Phone</th>
        <th>Date</th>
        <th>Total</th>
        <th>Weight(kg)</th>
        <th>Status</th>
        <th>View</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <% @orders.each_with_index do |order, index| %>
        <tr>
          <td><%= order.id %></td>
          <td><%= order.name %></td>
          <td><%=  %></td>
          <td><%= order.ddate1 %></td>
          <td><%=  order.total_price%></td>
          <td><%= order.weight%></td>
          <td><%= order.status %></td>
          <td><%= link_to 'View', dashboard_user_sale_path(user_id: current_user, id: order), class: 'btn btn-primary'%></td>
          <td><%= link_to 'Update Status/ Notes', '#', :id => 'login', "data-toggle" => "modal", 'data-target' => '#index', class: "btn btn-default"%></td>
        </tr>
        <%= render 'status_note', order: order, index: index%>
      <% end %>
    </tbody>
  </table>


</div>

<script>
function myFunction() {
  // Declare variables 
  var input, filter, table, tr, td, i;
  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")[0];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    } 
  }
}
</script>

＆＃13;

＆＃13;

<script>
function myFunction() {
  // Declare variables 
  var input, filter, table, tr, td, i;
  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")[0];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    } 
  }
}
</script>

＆＃13;

#myInput {
    background-image: url('/css/searchicon.png'); /* Add a search icon to input */
    background-position: 10px 12px; /* Position the search icon */
    background-repeat: no-repeat; /* Do not repeat the icon image */
    width: 100%; /* Full-width */
    font-size: 16px; /* Increase font-size */
    padding: 12px 20px 12px 40px; /* Add some padding */
    border: 1px solid #ddd; /* Add a grey border */
    margin-bottom: 12px; /* Add some space below the input */
}

#myTable {
    border-collapse: collapse; /* Collapse borders */
    width: 100%; /* Full-width */
    border: 1px solid #ddd; /* Add a grey border */
    font-size: 18px; /* Increase font-size */
}

#myTable th, #myTable td {
    text-align: left; /* Left-align text */
    padding: 12px; /* Add padding */
}

#myTable tr {
    /* Add a bottom border to all table rows */
    border-bottom: 1px solid #ddd; 
}

#myTable tr.header, #myTable tr:hover {
    /* Add a grey background color to the table header and on hover */
    background-color: #f1f1f1;
}

＆＃13;

<div class="container">

  <div class="page-header">
    <h3>Order List</h3>
  </div>

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for Names or order ID..">

  <table id="myTable">
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Phone</th>
        <th>Date</th>
        <th>Total</th>
        <th>Weight(kg)</th>
        <th>Status</th>
        <th>View</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <% @orders.each_with_index do |order, index| %>
        <tr>
          <td><%= order.id %></td>
          <td><%= order.name %></td>
          <td><%=  %></td>
          <td><%= order.ddate1 %></td>
          <td><%=  order.total_price%></td>
          <td><%= order.weight%></td>
          <td><%= order.status %></td>
          <td><%= link_to 'View', dashboard_user_sale_path(user_id: current_user, id: order), class: 'btn btn-primary'%></td>
          <td><%= link_to 'Update Status/ Notes', '#', :id => 'login', "data-toggle" => "modal", 'data-target' => '#index', class: "btn btn-default"%></td>
        </tr>
        <%= render 'status_note', order: order, index: index%>
      <% end %>
    </tbody>
  </table>


</div>

＆＃13;

＆＃13;

＆＃13;