Question

我正在使用以下函数根据输入字段过滤表格，该字段工作正常。

目前这是指固定列索引，其中我说“'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();
        }
    });
});

非常感谢你提供任何帮助，蒂姆。

Answer 1

您可以将它连接到作为选择器的字符串中，如下所示：

$(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';
    });
});

Answer 2

您需要使用字符串连接

$('.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();
        }
    });
});

或我首选的方法是使用.eq()

$('.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()));
    });
});

Answer 3

还有另一种方法可以做到这一点，即使用nth-child选择器。但:eq和:nth-selector之间存在细微差别。这是:eq更喜欢下限0，但同时:nth-child更喜欢下限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();
        }
    });
});

jQuery：将变量用于td：eq

3 个答案: