时间戳

首页 > 解决方案 > 从输入字段中选择表中的多行

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

问题描述

我正在尝试将一个过滤器应用于多个过滤器，以便根据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>

标签： jqueryhtml-tabledom-manipulation

解决方案

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

演示代码：

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>

推荐阅读