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

本文介绍了如何将jQuery过滤器添加到html表?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在尝试使用JQuery将下拉过滤器放到html表中.这是代码.

I'm trying to put a drop down filter to a html table using JQuery. Here's the code.

report.php

report.php

<table id ="myTable" class="table table-striped"> <thead> <tr> <th></th> <th> First Name </th> <th> Last Name </th> <th> Phone </th> <th> Email </th> <th> Gender</th> <th>Term <select id="filterText" onchange='filterText()'> <option disabled selected>Select</option> <option value="all">All</option> <option value="Fall2018">Fall2018</option> <option value="Srping2019">Spring2019</option> </select></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 class='row'> <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>{$report[$i]['Term']}</td> <td><a class=btn href='read.php?id=".$report[$i]['RegId']."'>Read</a></td> </tr>"; } } ?> </table>

main.js

function filterText() { var rex = new RegExp($('#filterText').val()); if(rex ==="/all/"){clearFilter();}else{ $('.row').show(); $('.row').filter(function() { return rex.test($(this).text()); }).hide(); } } function clearFilter() { $('.filterText').val(''); $('.row').show(); }

我正在将下拉过滤器添加到term列.此代码给出相反的结果.就像我单击下拉菜单的全部"选项时一样，结果中将显示Spring2019.当我单击"Spring2019"时，它将显示所有值.而且``2018年秋季''还显示了2019年春季的所有值.

I'm adding the dropdown filter to the term column. This code gives the opposite results. Like when I click on the 'All' option of the dropdown, it shows Spring2019 in the results. And when I click on the 'Spring2019' it shows all the values. And 'Fall2018' also shows all the Spring2019 values.

您可以检查代码中的错误吗?

Can you check what is wrong in the code?

推荐答案

Salam，我认为您可以按单元格文本而不是行文本进行过滤，只需将类添加到您的单元格中

Salam, i think you can filter by cell text instead of row text, just add class to your cell

<td>{$report[$i]['Term']}</td>

喜欢

<td class='term'>{$report[$i]['Term']}</td>

并将搜索功能更改为

function filterText() { var val = $('#filterText').val().toLowerCase(); if(val === "") return; if(val === "all") clearFilter(); else $('.term').each(function() { $(this).parent().toggle($(this).text().toLowerCase() === val); }); }