1

このテーブルがあるとしましょう：

<table class="table table-striped table-bordered table-condensed">
    <tr>
        <th><h1>Tracks</td></th>
    </tr>
    <tr>
        <th>Track Id</th>
        <th>Artist</th>
        <th>Track Name</th>
        <th>Uploader</th>
        <th>Status</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Artist 1</td>
        <td>Track Name 1</td>
        <td>Uploader 1</td>
        <td>Blocked</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Artist 2</td>
        <td>Track Name 2</td>
        <td>Uploader 2</td>
        <td>Visible</td>
    </tr>
</table>

JQuery を使用して、値に応じてテーブルの行をどのように配置しますか? テーブルデータ値のみを含むテーブル行を表示したいとしましょう。Jquery を使用してそれを行うにはどうすればよいですか?

4

2 に答える 2

2

次に例を示します。

$('#search').on('keyup', function() {
    var val = $.trim(this.value).toLowerCase();
    $('table > tbody > tr:gt(1)').hide();
    if (val.length) {
        $('table > tbody > tr:gt(1) > td').filter(function() {
            return this.innerHTML.toLowerCase().indexOf(val) >= 0;
        }).parent().show();
    } else  $('table > tbody > tr:gt(1)').show();
});

（これにより、いくつかのガイドラインが得られます）

デモ

関連参照:

于 2012-07-28T13:37:05.643 に答える
1

バリアントとして ( DEMO ):

HTML

<input id="search" type="text">

<table id="table" class="table table-striped table-bordered table-condensed">
    <tr>
        <th>Track Id</th>
        <th>Artist</th>
        <th>Track Name</th>
        <th>Uploader</th>
        <th>Status</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Artist 1</td>
        <td>Track Name 1</td>
        <td>Uploader 1</td>
        <td>Blocked</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Artist 2</td>
        <td>Track Name 2</td>
        <td>Uploader 2</td>
        <td>Visible</td>
    </tr>
</table>

JavaScript

$(document).ready(function () {
    $('#search').keyup(function () {
        $('#table tr').show();
        var q = $(this).val().toLowerCase();

        $('#table tr:not(:first)').each(function () {
            var visible = false;

            $('td', this).each(function () { 
                var content = $(this).text().toLowerCase();                    
                if (content.indexOf(q) != -1) visible = true;
            });

            $(this).toggle(visible);
        });
    })
});​

デモ

于 2012-07-28T13:45:56.997 に答える