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

ここでは 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 に答える