1

我的桌子：

<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>

我想要实现的是，当单击“管理员”时，它只会显示桌面上的管理员，反之亦然。但是，我已经做了一些研究，我想要实现的最佳匹配是使用搜索功能，但这不是我想要实现的。

可以在这里看到一个例子：http ://www.javascriptkit.com/script/script2/tablefilter.shtml

4

2 回答 2

1

更新：没有 thead 和 tbody / 备用行颜色

在这里查看，演示http://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++;
    });
}
于 2013-07-09T04:09:08.667 回答
1

我在这里使用了 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>
于 2013-07-09T03:29:12.340 回答