dongyou2635 2019-01-15 19:52
浏览 123

如何将jQuery过滤器添加到html表

I'm trying to add a jquery drop down filter to a table being pulled from the database

I referred to a few similar questions and got the code from one of them. I could make the drop down front end working but got stuck with the back end.

report.php

<div id="container">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> 
</script>
<label for="filter">Gender:</label>
<select class="filter" data-tableId="myTable">
  <option value="all">All</option>
  <option value="male">Male</option>
  <option value="female">Female</option>
</select>
  <body>
  <i style="font-size:24px" class="fa">&#xf019;</i>
  </body>
   </html>
<div class="table-responsive">
    <table id ="myTable" class="table table-striped">
      <thead>
        <tr>
          <th> First Name </th>
          <th> Last Name </th>                  
          <th> Phone </th>
          <th> Email </th>              
          <th> Gender </th>
          <th> Action </th>  
        </tr>
      </thead> 
      <?php
        if (count($report) === 0) {
            echo "<tr>No Reports</tr>";
        } else {
            for ($i = 0; $i < count($report); $i++) {
                echo
                "<tr>
                    <td>{$report[$i]['FName']}</td>
                    <td>{$report[$i]['LName']}</td>
                    <td>{$report[$i]['HPhone']}</td>
                    <td>{$report[$i]['PEmail']}</td>
                    <td>{$report[$i]['Gender']}</td>

                    <td><a class=btn href='read.php?id=".$report[$i]['RegId']."'>Read</a></td>    
                </tr>"; 
            }
        }
      ?>
    </table> 
</div>

main.js

$(".filter").change(function() {
  var filterValue = $(this).val();
  var row = $('.row'); 

  row.hide();
  row.each(function(i, el) {
    if($(el).attr('data-type') === filterValue) {
      $(el).show();
    }
  }); 
});

I want to put the filter on the gender column of the table.

I'm sure there's some mistake in main.js and have been trying to figure it out for a while now but couldn't find it. I'm new to jquery, any help would be appreciated. TIA

  • 写回答

2条回答 默认 最新

  • dsjbest2015 2019-01-16 06:16
    关注
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $("#myInput").on("keyup", function() {
      var value = $(this).val().toLowerCase();
      $("#myTable tr").filter(function() {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
      });
    });
  });
</script>
    评论

报告相同问题？

悬赏问题

  • ¥15 如何在scanpy上做差异基因和通路富集？
  • ¥20 关于#硬件工程#的问题，请各位专家解答！
  • ¥15 关于#matlab#的问题：期望的系统闭环传递函数为G(s)=wn^2/s^2+2¢wn+wn^2阻尼系数¢=0.707，使系统具有较小的超调量
  • ¥15 FLUENT如何实现在堆积颗粒的上表面加载高斯热源
  • ¥30 截图中的mathematics程序转换成matlab
  • ¥15 动力学代码报错，维度不匹配
  • ¥15 Power query添加列问题
  • ¥50 Kubernetes&Fission&Eleasticsearch
  • ¥15 報錯：Person is not mapped，如何解決？
  • ¥15 c++头文件不能识别CDialog