实时搜索过滤标签 td答案

【问题标题】：Live Search Filtering tags td实时搜索过滤标签 td
【发布时间】：2013-09-12 06:08:54
【问题描述】：

我的实时搜索有问题，过滤工作正常，但我想要的是只有 <td> 标签可以过滤，<th> 不属于。

这是我的 html

<input />
 <table class="AvailableGroupLab availGrpLabs avalLabs">
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>

    <tr>
        <td><span>wewe</span>

        </td>
        <td>16</td>
    </tr>
    <tr>
        <td><span>Melvin</span>

        </td>
        <td>18</td>
    </tr>
    <tr>
        <td><span>Marvin</span>

        </td>
        <td>20</td>
    </tr>
</table>

和 javascript

function filter(element) {
    var $trs = $('.AvailableGroupLab tr').hide();
    var regexp = new RegExp($(element).val(), 'i');

    var $valid = $trs.filter(function () {
        return regexp.test($(this).find('td:first-child').text())
    }).show();

    $trs.not($valid).hide()
}

$('input').on('keyup change', function () {
    filter(this);
})

【问题讨论】：

已经是了？ jsfiddle.net/svHfj
是的。但我想要的是 th 不属于只过滤 td

标签： javascript php html codeigniter

【解决方案1】：

试试这个：

function filter(element) {
var $trs = $('.AvailableGroupLab tr').not(":first").hide(); //don't hide first tr 
var regexp = new RegExp($(element).val(), 'i');

var $valid = $trs.filter(function () {
    return regexp.test($(this).find('td:first-child').text())
}).show();

$trs.not($valid).hide()
}

$('input').on('keyup change', function () {
    filter(this);
})

Fiddle Here

【讨论】：

【解决方案2】：

我猜你需要使用:not(:first-child)选择除第一个之外的所有tr

function filter(element) {
    var $trs = $('.AvailableGroupLab tr:not(:first-child)').hide();
    var regexp = new RegExp($(element).val(), 'i');

    var $valid = $trs.filter(function () {
        return regexp.test($(this).find('td:first-child').text())
    }).show();

    $trs.not($valid).hide()
}

$('input').on('keyup change', function () {
    filter(this);
})

查看http://jsfiddle.net/svHfj/3/

【讨论】：

【解决方案3】：

您可以使用tbody 和thead

演示： http://jsfiddle.net/svHfj/2/

<table class="AvailableGroupLab availGrpLabs avalLabs">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><span>wewe</span>

            </td>
            <td>16</td>
        </tr>
        <tr>
            <td><span>Melvin</span>

            </td>
            <td>18</td>
        </tr>
        <tr>
            <td><span>Marvin</span>

            </td>
            <td>20</td>
        </tr>
    </tbody>
</table>

还有js

function filter(element) {
    var $trs = $('.AvailableGroupLab tbody tr').hide();
    var regexp = new RegExp($(element).val(), 'i');

    var $valid = $trs.filter(function () {
        return regexp.test($(this).find('td:first-child').text())
    }).show();

    $trs.not($valid).hide()
}

$('input').on('keyup change', function () {
    filter(this);
})

【讨论】：

【解决方案4】：

改变这个

var $trs = $('.AvailableGroupLab td').hide();

EXAMPLE

现在它不会过滤标题了。

【讨论】：

【解决方案5】：

here 是您问题的解决方案。

使用$('.AvailableGroupLab tr:not(:has(tr)):odd') 而不是$('.AvailableGroupLab tr')

function filter(element) {
    var $trs = $('.AvailableGroupLab tr:not(:has(tr)):odd').hide();
    var regexp = new RegExp($(element).val(), 'i');

    var $valid = $trs.filter(function () {
        return regexp.test($(this).find('td:first-child').text())
    }).show();

    $trs.not($valid).hide()
}

【讨论】：

【解决方案6】：

只需从选择器中删除第一个元素

http://jsfiddle.net/svHfj/12/

function filter(element) {
    var $trs = $('.AvailableGroupLab tr');

    $trs.each(function() {
        if ( $(this).find('th').length) { // if th remove it
           $trs = $trs.not($(this));          
        }
    });

    $trs.hide();
    var regexp = new RegExp($(element).val(), 'i');

    // also you don't need filter
    $trs.each(function () {        
       if (!regexp.test($(this).find('td:first-child').text())) return;
       $(this).show();
    });
}

$('input').on('keyup change', function () {
    filter(this);
});

【讨论】：