jQuery:td:eq使用变量

我正在使用下面的函数根据工作正常的输入字段筛选表

目前，这是指一个固定的列索引，其中我说“

'td:eq（3）

”

我如何在这里引用变量“colIndex”，而不是使用固定的列索引？ 另外，是否有一种方法可以根据我的第一行代码获取当前表的id，这样我就不必引用下面的表类（“myTable”）

我的代码（工作）：

$('.myClass').on('keyup', function () {
    var colIndex = $(this).closest('th').index();
    var regex = new RegExp($(this).val().toLowerCase(), "i");
    $('.myTable').find('tr:gt(1)').each(function () {
        if ($(this).find('td:eq(3)').text().match(regex) == null) {
            $(this).hide();
        } else {
            $(this).show();
        }
    });
});

---

非常感谢您在这方面的帮助，Tim。

您可以将其连接到字符串中，该字符串是选择器，如下所示：

$(this).find('td:eq(' + colIndex + ')')

给你

$('.myClass').on('keyup', function () {
    var colIndex = $(this).closest('th').index();
    var regex = new RegExp($(this).val().toLowerCase(), "i");

    $('.myTable').find('tr:gt(1)').each(function () {
        if ($(this).find('td:eq(' + colIndex + ')').text().match(regex) == null) {
            $(this).hide();
        } else {
            $(this).show();
        }
    });
});

这样做似乎更容易：

$('.myClass').on('keyup', function () {
    var idx = $(this).closest('th').index(),
        val = this.value.toLowerCase();

    $('.myTable tr:gt(1)').css('display', function() {
        return $('td', this).eq(idx).text().toLowerCase() == val ? 'block' : 'hide';
    });
});

---

您需要使用字符串连接

$('.myClass').on('keyup', function () {
    var colIndex = $(this).closest('th').index();
    var regex = new RegExp($(this).val().toLowerCase(), "i");
    $('.myTable').find('tr:gt(1)').each(function () {
        if ($(this).find('td:eq(' + colIndex + ')').text().match(regex) == null) {
            $(this).hide();
        } else {
            $(this).show();
        }
    });
});

或者我更喜欢的方式是使用

您可以尝试的一些更改包括

var $table = $('.myTable');
$('.myClass').on('keyup', function () {
    var colIndex = $(this).closest('th').index();
    var regex = new RegExp($(this).val().toLowerCase(), "i");
    $table.find('tr').slice(1).each(function () {
        $(this).toggle(regex.test($(this).find('td').eq(colIndex).text()));
    });
});

---

还有另一种方法可以做到这一点，那就是使用

nth child

选择器。但是

：eq

和

：n选择器之间有一个很小的区别。也就是说，
：eq
更喜欢下限为
0
，但同时
：n个孩子
更喜欢下限为
1

$('.myClass').on('keyup', function () {
    var colIndex = $(this).closest('th').index();
    var regex = new RegExp($(this).val().toLowerCase(), "i");
    $('.myTable').find('tr:gt(1)').each(function () {
        if ($(this).find('td:nth-child(' + (colIndex + 1) + ')').text().match(regex) == null) {
            $(this).hide();
        } else {
            $(this).show();
        }
    });
});

非常感谢-这太完美了。我会试试这个建议。非常感谢——我也会试试这个。
$('.myClass').on('keyup', function () {
    var colIndex = $(this).closest('th').index();
    var regex = new RegExp($(this).val().toLowerCase(), "i");
    $('.myTable').find('tr:gt(1)').each(function () {
        if ($(this).find('td:nth-child(' + (colIndex + 1) + ')').text().match(regex) == null) {
            $(this).hide();
        } else {
            $(this).show();
        }
    });
});