我正在尝试使用 JQuery 将下拉过滤器放入 html 表中。这是代码。
报告.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();
}
我将下拉过滤器添加到术语列中。这段代码给出了相反的结果。就像当我单击下拉列表的“全部”选项时,它会在结果中显示 Spring2019。当我单击“Spring2019”时,它会显示所有值。 “2018 年秋季”还显示了 2019 年春季的所有值。
你能检查一下代码中有什么问题吗?
萨拉姆,
我认为您可以按单元格文本而不是行文本进行过滤,只需将类添加到单元格中
<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);
});
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)