0

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

目前这是指我说“ '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();
        }
    });
});

非常感谢您对此提供的任何帮助，蒂姆。

4

3 回答 3

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';
    });
});
于 2013-11-24T13:13:10.743 回答
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: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()));
    });
});
于 2013-11-24T13:13:16.040 回答
0

还有另一种方法可以做到这一点，那就是使用nth-child选择器。:eq但是和之间有一个小的区别:nth-selector。那是:eq更喜欢下界 as0但同时:nth-child更喜欢下界 as 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();
        }
    });
});
于 2013-11-24T13:24:41.147 回答