使用javascript单击按钮，根据值筛选html表 - filter html table based on a value by clicking a button using javascript

filter html table based on a value by clicking a button using javascript

下面的代码在网页上从mysql创建一个表。我希望能够添加3个按钮，并能够按男性、女性过滤表格信息，并使用javascript/jquery显示所有信息。我试过一些关于stackoverflow的建议，但它们似乎不符合我的要求。

请有人帮我实现解决方案吗？：）

<thread>
    <tr>
        <th>Primary Key</th>
        <th>Full Name</th>
        <th>Gender</th>
        <th>Facebook Profile</th>
    <tr>
</thread>
<button type="button" class="btn btn-default btn-lg" id="male">Male</button>
<br><br>
<button type="button" class="btn btn-default btn-lg" id="female">Female</button>

echo "<br /><br />There are " . $num_rows . " participants.";
echo "<br />There are " . $num_rows1 . " male participants.";
echo "<br />There are " . $num_rows2 . " female participants.";
echo "<br /><br />";

while($tablev2=mysql_fetch_assoc($records)) {
   if($tablev2['gender']=='male') {
$var_tr = 'success';
}
elseif($tablev2['gender']=='female') {
    $var_tr = 'danger';
}
    echo "<tr class='$var_tr'>";
    echo "<td>".$tablev2['primary_key']."</td>";
    echo "<td>".$tablev2['name']."</td>";
    echo "<td>".$tablev2['gender']."</td>";
    echo "<td><a target = '_blank' href='".$tablev2['link']."'>Click to see their facebook profile</a></td>";
    echo "</tr>";

}

javascript:

$（document）.ready（function）｛

$("#male").click(function(){
    $('tr.female').toggle();
});

$('#female').click(function(){
    $('tr.male').toggle();
});

})；

您使用的类名是错误的，您分别使用了男性和女性的类名success和danger。

jQuery(function ($) {
    var filter;
    $("#male").click(function () {
        if (filter == 'male') {
            $('tr').show();
            filter = undefined;
        } else {
            $('tr:not(.success)').hide();
            $('tr.success').show();
            filter = 'male';
        }
    });
    $("#female").click(function () {
        if (filter == 'female') {
            $('tr').show();
            filter = undefined;
        } else {
            $('tr:not(.danger)').hide();
            $('tr.danger').show();
            filter = 'female';
        }
    });
});

演示：Fiddle

如果你可以将类名改为男性和女性，它可以简化为

<button type="button" class="btn btn-default btn-lg filter" id="male">Male</button>
<br/>
<br/>
<button type="button" class="btn btn-default btn-lg filter" id="female">Female</button>

然后

jQuery(function ($) {
    var filter;
    $('.filter').click(function () {
        if (filter == this.id) {
            $('tr').show();
            filter = undefined;
        } else {
            $('tr:not(.' + this.id + ')').hide();
            $('tr.' + this.id).show();
            filter = this.id;
        }
    });
});

演示：Fiddle

我找到了另一个解决方案，它不会用三个按钮删除表的标题行：

javascript:

$（document）.ready（function）｛

$("#male").click(function(){
    $('tbody > tr:not(.male)').toggle();
});
$('#female').click(function(){
    $('tbody > tr:not(.female)').toggle();
}); 
$('#all').click(function(){
     $('tbody > tr').show();
});

})；