从输入字段中选择表中的多行

Question

我正在尝试将一个过滤器应用于多个过滤器，以便根据 input 字段的值显示表格中的特定行。

我知道slice() 方法允许我们执行此过程，但是当使用多个值时，我不知道如何管理多个值的结构以达到预期的结果。

例如，如果 value 字段对应于1,5-10,15，它将显示第 1 行、第 5 到第 10 行和第 15 行。要知道 value 字段的顺序无关紧要。例如，这可能看起来像 5-10, 15, 20-30, 19 或 2,5,8-10,11-15。

这是我迄今为止尝试过的：

for (let i = 0; i <= 50; i++) {
  let rows = '<tr>';
  rows += '<td>100</td><td>100</td><td>100</td>';
  rows += '</tr>';
  $('table tbody').append(rows);
}

$('input').off().on('focusout', function() {
  let format, row = '';
  let val = $(this).val();
  if (val.includes(',')) {
    row = val.split(',');
  }

  format = !!row ? row : val;

  if (!format.includes('-')) {
    let filters = '';
    for (let i = 0; i < format.length; i++) {
      filters += '.not(":nth-child(' + format[i] + ')")';
    }

    $('table tbody tr') + filters + '.css("display", "none")';
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" placeholder="1-5,9">
<table border="border">
  <thead>
    <tr>
      <th class="text-center">data</th>
      <th class="text-center">data</th>
      <th class="text-center">data</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

Answer 1

一种方法是将输入拆分为一个数组。从那里您可以使用正则表达式来确定用户是否正在寻找单行索引或范围。然后您可以使用:eq() 定位相关行并显示它们。试试这个：

// demo code for HTML setup...
let rows = [];
for (let i = 0; i <= 50; i++) {
  let rowNum = i + 1;
  rows.push(`<tr><td>${rowNum}</td><td>${rowNum}</td><td>${rowNum}</td></tr>`);
}
let $rows = $('table tbody').append(rows).find('tr');

// filtering handler:
$('input').on('input', function() {
  $rows.hide();

  this.value.split(/,\s?/g).forEach(value => {
    let matches = value.match(/^(\d+)-?(\d+)?$/);
    if (matches && matches[2]) {
      // range...
      let from = Math.min(matches[1], matches[2]) - 1;
      let to = Math.max(matches[1], matches[2]) + 1;
      $rows.filter(`tr:eq(${from})`).nextUntil(`tr:eq(${to})`).addBack().show();
    } else if (matches && matches[1]) {
      // single...
      $rows.filter(`:eq(${matches[1] - 1})`).show();
    } else {
      value && console.log(`${value} - invalid`);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" placeholder="1-5,9">
<table border="border">
  <thead>
    <tr>
      <th class="text-center">data</th>
      <th class="text-center">data</th>
      <th class="text-center">data</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

Answer 2

您可以首先检查该值是否包含,，这意味着多个值，然后您需要拆分输入的值，然后使用for循环并在每次迭代时检查i的值是否存在-取决于此使用:eq 或splice 方法的jquery。

演示代码：

for (let i = 1; i <= 50; i++) {
  let rows = '<tr>';
  rows += '<td>' + i + '</td><td>100</td><td>100</td>';
  rows += '</tr>';
  $('table tbody').append(rows);
}

$('input').on('focusout', function() {
  let format, row = '';
  let val = $(this).val();
  $('table tbody tr').hide() //hide all
  //if include `,`
  if (val.includes(',')) {
    row = val.split(',');
    //loop through all datas
    for (var i = 0; i < row.length; i++) {
      //not there `-`
      if (!row[i].includes('-')) {
        //show that using eq
        $('table tbody tr:eq(' + (row[i] - 1) + ')').show()

      } else {
        //split and show using splice
        var value = row[i].split('-')
        $('table tbody tr').slice(value[0] - 1, value[1]).show()


      }

    }
  } else {
  //for single value
    if (!val.includes('-')) {
      $('table tbody tr:eq(' + (val - 1) + ')').show()

    } else {
      var value = val.split('-')
      $('table tbody tr').slice(value[0] - 1, value[1]).show()
    }


  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" placeholder="1-5,9">
<table border="border">
  <thead>
    <tr>
      <th class="text-center">data</th>
      <th class="text-center">data</th>
      <th class="text-center">data</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>