如何通过单击图像而不是使用搜索来过滤表格

How to filter a table by clicking on images instead of using search?

本文关键字：搜索 过滤 表格 单击 何通过 图像      更新时间：2023-09-26

我的表：

<div id="usertable">
    <div class="choicebox">
        <div id="choicebox">
            <table>
                <tr>
                    <td>
                        ALL
                    </td>
                    <td>
                        ADMIN
                    </td>
                    <td>
                        MEMBER
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div class="userbox">
        <table id="tablelist" >
            <tr>
                <div class="firstrow">
                    <div style="margin-left:20px;margin-top:12px;position:absolute;color:white">
                        User List
                    </div>
                </div>
            </tr>
            <tr>
                <td >
                    Name
                </td>
                <td>
                    User ID
                </td>
                <td>
                    Password
                </td>
                <td >
                    Organisation
                </td>
                <td>
                    Role
                </td>
                <td>
                    Status
                </td>
                <td>
                    Actions
                </td>
            </tr>
        </table>
    </div>
</div>

我试图实现的是，当点击"Admin"时，它只会显示表上的管理员，反之亦然。然而，我已经做了一些研究，我想实现的目标的最佳匹配是使用搜索功能，但这不是我想要实现的。

示例如下：http://www.javascriptkit.com/script/script2/tablefilter.shtml

更新：不带ad和tbody/alternate行颜色

查看这里，DEMOhttp://jsfiddle.net/yeyene/hnJdX/2/

注：我基于您的表格数据，7 columns和文本，Admin，Member。

因此，我检查了第5列和文本，并进行了筛选。如果您有更多的列和不同的文本，请相应地更新代码。

$(document).ready(function () {
    alternateRowColor();
    $('#admin').on('click', function () {
        $('#tablelist tr').each(function () {
            $(this).show(0);
            if ($.trim($(this).children('td').eq(4).text()) != 'Admin') {
                $(this).not('.rowHeader').hide(0);
            }
        });
        alternateRowColor();
    });
    $('#member').on('click', function () {
        $('#tablelist tr').each(function () {
            $(this).show(0);
            if ($.trim($(this).children('td').eq(4).text()) != 'Member') {
                $(this).not('.rowHeader').hide(0);
            }
        });
        alternateRowColor();
    });
    $('#all').on('click', function () {
        $('#tablelist tr').each(function () {
            $(this).show(0);
        });
        alternateRowColor();
    });
});
function alternateRowColor() {
    var i = 0;
    $('#tablelist tr:visible').each(function () {
        if (i % 2 === 0) $(this).removeClass('odd').addClass('even');
        else $(this).removeClass('even').addClass('odd');
        i++;
    });
}

我在这里使用了JQuery。

<!DOCTYPE html>
<html>
<head>
<title>My Sample Project</title>
<script type="text/javascript" src="jquery-2.0.2.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
        $('.choicebox table tr td a').click(function(e){
            var href = $(this).attr("href");
            if(href === "ALL"){
                $('#tablelist tbody tr').show();
                return false;
            }   
            $('#tablelist tbody tr').filter(function(index) {
                    var role = $(this).children()[4].innerHTML;
                    return role === href;
                }
            ).show();
            $('#tablelist tbody tr').filter(function(index) {
                    var role = $(this).children()[4].innerHTML;
                    return role !== href;
                }
            ).hide();
            return false;
        });
    });
</script>
</head>
<body>
    <div id="usertable">
        <div class="choicebox">
            <div id="choicebox">
                <table>
                    <tr>
                        <td><a href="ALL">ALL</a></td>
                        <td><a href="ADMIN">ADMIN</a></td>
                        <td><a href="MEMBER">MEMBER</a></td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="userbox">
            <table id="tablelist">
                <thead>
                     <tr>
                         <th>Name</th>
                         <th>User ID</th>
                         <th>Password</th>
                         <th>Organisation</th>
                         <th>Role</th>
                         <th>Status</th>
                         <th>Actions</th>
                     </tr>
                </thead>
               <tbody>
                <tr>
                    <td>nanfeng</td>
                    <td>1</td>
                    <td>123</td>
                    <td>org</td>
                    <td>MEMBER</td>
                    <td>OFF</td>
                    <td>DOING</td>
                </tr>
                <tr>
                    <td>beifeng</td>
                    <td>2</td>
                    <td>1234</td>
                    <td>org</td>
                    <td>ADMIN</td>
                    <td>OFF</td>
                    <td>DOING</td>
                </tr>
                <tr>
                    <td>dongfeng</td>
                    <td>3</td>
                    <td>1235</td>
                    <td>org</td>
                    <td>MEMBER</td>
                    <td>OFF</td>
                    <td>DOING</td>
                </tr>
                </tbody>
            </table>
        </div>
        </div>
    </body>
</html>
相关文章：