Javascript 实时搜索过滤标签

我的实时搜索有问题，过滤正在工作，但我想要的是只有

标记可以过滤，而

不属于我

这是我的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>

试试这个：

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);
})

试试这个：

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);
})

---

您可以使用

tbody

和

thead

演示：

---

您可以使用

tbody

和

thead

演示：

---

我想您需要使用

：not（：first child）

---

选中此复选框，我想您需要使用

：not（：first child）

检查此项

更改此项

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

现在它将不会过滤标题。

更改此选项

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

现在它将不会过滤标题。

是您问题的解决方案

使用

$（'.AvailableGroupLab tr:not（：has（tr））：odd'）

代替

$（'.AvailableGroupLab tr'）

是您问题的解决方案

使用

$（'.AvailableGroupLab tr:not（：has（tr））：odd'）

代替

$（'.AvailableGroupLab tr'）

---

只需从选择器中删除th元素

---

只需从选择器中删除th元素

---

已经是了？是 啊但我想的是，th不是属于过滤的，只是TDS已经是了吗？是 啊但我要的是th不是只属于过滤的td

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);
})

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

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()
}

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);
});