Question

我的表格如下：

<table>
   <tr>
      <td>Apple</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Grapes</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Orange</td>
      <td>Orange</td>
   </tr>
</table>

搜索javascript如下：

var $rows = $('#table tr');
$('#search').keyup(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

    $rows.show().filter(function() {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(val);
    }).hide();
});

请看这个例子以更好地理解我的问题：

http://jsfiddle.net/7BUmG/4398/

我使用第一个输入字段过滤表格行。然后，当我使用第二个输入字段时，不包括第一次搜索的结果。我该如何解决？

Answer 1

当您应用过滤器时，您首先显示所有行，否定之前对它们进行的任何过滤。这是该问题的一个解决方案......它存储过滤器，并根据您的小提琴应用于任一输入的keyup事件。

var $rows = $('#table tr');
var filters = { col1: '', col2: ''};
$('#search1').keyup(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
    filters.col1 = val;
    applyFilters();
});
$('#search2').keyup(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
    filters.col2 = val;
    applyFilters();
});
function applyFilters() {
    $rows.show();
  $rows.filter(function() {
        var text = $(this).find('td:nth-child(1)').text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(filters.col1);
    }).hide();
  $rows.filter(function() {
    var text = $(this).find('td:nth-child(2)').text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(filters.col2);
    }).hide();
};

Answer 2

您当前的逻辑有点困惑。您正在为每个搜索字段重新显示并重新隐藏已过滤的项目。你真正想要的是一次性过滤所有这些：

var $rows = $('#table tr');
$('#search1, #search2').on('input', function() {
    var val1 = $.trim($('#search1').val()).replace(/ +/g, ' ').toLowerCase();
    var val2 = $.trim($('#search2').val()).replace(/ +/g, ' ').toLowerCase();
    
    $rows.show().filter(function() {
        var text1 = $(this).find('td:nth-child(1)').text().replace(/\s+/g, ' ').toLowerCase();
        var text2 = $(this).find('td:nth-child(2)').text().replace(/\s+/g, ' ').toLowerCase();
        return !~text1.indexOf(val1) || !~text2.indexOf(val2);
    }).hide();
});

body {padding: 20px;}
input {margin-bottom: 5px; padding: 2px 3px; width: 98px;}
td {padding: 4px; border: 1px #CCC solid; width: 100px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search1" placeholder="Type to search">
<input type="text" id="search2" placeholder="Type to search">
<table id="table">
   <tr>
      <td>Apple</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Grapes</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Orange</td>
      <td>Orange</td>
   </tr>
</table>

这当然假设非动态数量的列和过滤器字段。如果这就是你所追求的，你需要检查索引而不是硬编码td:nth-child(1)和td:nth-child(2)

Answer 3

您可以使用project.findById(req.projectId}) .populate('subscribers') .populate('group') .exec(function(err, project){ console.log(project); });完成此操作。此代码将收集每个each()的每个输入的值，然后如果使用keyup()在相应的td中存在此值，则会显示包含此值的indexOf() tr并隐藏其他人，否则会显示所有td

http://jsfiddle.net/7BUmG/4399/

＆＃13;

tr

＆＃13;

var $rows = $('#table tr'),
    searchVal1,
    searchVal2,
    td1,
    td2;

$('input').keyup(function () {
  searchVal1 = $('#search1').val(),
  searchVal2 = $('#search2').val();

  $rows.each(function (index, tr) {
    td1 = $(tr).find('td:nth-of-type(1)').text().toLowerCase(),
    td2 = $(tr).find('td:nth-of-type(2)').text().toLowerCase();

    if ( (td1.indexOf(searchVal1) != -1) && (td2.indexOf(searchVal2) != -1) ) {
      $(this).show();
    } else {
      $(this).hide();
    }
  });

  if ((searchVal1 === '') && (searchVal2 === '')) {
    $rows.show();
  }
});

＆＃13;

body {padding: 20px;}
input {margin-bottom: 5px; padding: 2px 3px; width: 98px;}
td {padding: 4px; border: 1px #CCC solid; width: 100px;}

＆＃13;

如何通过两个输入文本字段组合表中的搜索？

3 个答案: