Question

我有带有文字和图标的HTML表格。我尝试通过文本或/和图像进行过滤/搜索。图像过滤现在正在运行我想知道如何添加文本搜索功能。

<div id="usertable">
<div class="choicebox">
    <div id="choicebox">
        <table>
            <tr>
                <td> <a id="all">ALL</a>

                </td>
                <td>
                    <img id="admin" src="http://icons.iconarchive.com/icons/iconshock/windows-7-general/256/administrator-icon.png" width="30" height="30">
                </td>
                <td>
                    <img id="member" src="http://blog.getjobber.com/wp-content/uploads/2013/01/Users-Image.png" width="30" height="30">
                </td>
                <td>
                    <input id="search"></input>
                </td>
            </tr>
        </table>
    </div>
</div>
<div class="userbox">
    <table id="tablelist">
        <tr class="rowHeader">
            <td colspan="7">
                <div class="firstrow">
                    <div>User List</div>
                </div>
            </td>
        </tr>
        <tr class="rowHeader">
            <td>Name</td>
            <td>User ID</td>
            <td>Password</td>
            <td>Organisation</td>
            <td>Role</td>
            <td>Status</td>
            <td>Extra</td>
        </tr>
        <tr>
            <td>John</td>
            <td>2325</td>
            <td>Admin Password</td>
            <td>Park</td>
            <td>Admin</td>
            <td>Admin Status</td>
            <td><img class="admin"  src="http://icons.iconarchive.com/icons/iconshock/windows-7-general/256/administrator-icon.png" width="30" height="30"></td>
        </tr>
        <tr>
            <td>Dave</td>
            <td>5598</td>
            <td>Member Password</td>
            <td>Club</td>
            <td>Member</td>
            <td>Admin Status</td>
            <td><img class="user" src="http://blog.getjobber.com/wp-content/uploads/2013/01/Users-Image.png" width="30" height="30"></td>
        </tr>
        <tr>
            <td>Jane</td>
            <td>6587</td>
            <td>Admin Password</td>
            <td>Garden</td>
            <td>Admin</td>
            <td>Admin Status</td>
            <td><img class="admin"  src="http://icons.iconarchive.com/icons/iconshock/windows-7-general/256/administrator-icon.png" width="30" height="30"></td>
        </tr>
        <tr>
            <td>Paul</td>
            <td>2254</td>
            <td>Member Password</td>
            <td>Parking</td>
            <td>Member</td>
            <td>Admin Status</td>
            <td><img class="user" src="http://blog.getjobber.com/wp-content/uploads/2013/01/Users-Image.png" width="30" height="30"></td>
        </tr>
    </table>
</div>

JS部分看起来像这样：

$(document).ready(function () {
alternateRowColor();

$('#admin').on('click', function () {
    $('#tablelist tr').each(function () {
        $(this).show(0);
        if ($.trim($(this).find('img').attr('class')) != 'admin') {
            $(this).not('.rowHeader').hide(0);
        }
    });
    alternateRowColor();
});
$('#member').on('click', function () {
    $('#tablelist tr').each(function () {
        $(this).show(0);
        if ($.trim($(this).find('img').attr('class')) != 'user') {
            $(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++;
    });
}

这是http://jsfiddle.net/zaga/j8hw023o/7/

的JSFidle

Answer 1

你可以做到，

$("#search").on('keyup', function () {
    var input = this.value.toLowerCase();

    $("#usertable table tr:hidden").show();
    $("#tablelist tr:not(.rowHeader)").filter(function () {
        return $(this).find("td:first-child").text().toLowerCase().indexOf(input) < 0;
    }).hide();    
});

<强> Fiddle Demo

HTML表格按文字和图像过滤

1 个答案: