javascript - 筛选具有多个值的表

标签 javascript jquery html

我这里有一个代码，它是表数据的示例，我们可以在其中按列过滤，现在我想过滤具有多个值的状态字段，例如:如果我想打印已完成和已完成的数据怎么办？ ongoing 和 suspended，那么这个数据应该是唯一要打印的数据，我该怎么办？请帮助!

var $rows = $('tbody > tr'),
    $filters = $('#filter_table input');

$filters.on("keyup", function () {
    var $i = $filters.filter(function () {
        return $.trim(this.value).length > 0;
    }),
        len = $i.length;

    if (len === 0) return $rows.show();

    var cls = '.' + $i.map(function () {
        return this.className
    }).get().join(',.');

    $rows.hide().filter(function () {
        return $('td', this).filter(cls).filter(function () {
            var content = this.textContent,
                inputVal = $i.filter('.' + this.className).val();

            return content.toLowerCase().indexOf(inputVal.toLowerCase()) > -1;

        }).length === len;
    }).show();
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<div class="panel panel-default" id="filter_table">
  Input here to Search <br>
                      <input type='text' class='Program' id='Program' style="width: 100px;" placeholder="Program" />
                      <input type='text' class='Year' id='Year' style="width: 100px;" placeholder="Year" />
                      <input type='text' class='Province' id='Province' style="width: 100px;" placeholder="Province" />
                      <input type='text' class='LGU' id='LGU' style="width: 100px;" placeholder="LGU" />
                      <input type='text' class='Barangay' id='Barangay' style="width: 100px;" placeholder="Barangay" />
                      <input type='text' class='Project' id='Project' style="width: 100px;" placeholder="Project" />
                      <input type='text' class='Allocation' id='Allocation' style="width: 100px;" placeholder="Allocation" />
                      <input type='text' class='Status' id='Status' style="width: 100px;" placeholder="Status" />
</div>

<table border='1' class="table table-hover" id='products'>
            <thead>
                    <tr>
                      <th width="10px">Program
                      </th>
                      <th width="10px">Year
                      </th>
                      <th width="20px">Province
                      </th>
                      <th  width="20px">Municipality/LGU
                      </th>
                      <th  width="20px">Barangay
                      </th>
                      <th  width="30px">Project
                      </th>
                      <th  width="20px">Allocation
                      </th>
                      <th  width="20px">Status
                      </th>
                      <th  width="5px">PA%
                      </th>
                    </tr>
                </thead>
            <tbody>
            <tr>
                      <td width="10px" class='Program'>Program1
                      </td>
                      <td width="10px" class='Year'>2012
                      </td>
                      <td width="20px" class='Province'>Province1
                      </td>
                      <td width="20px" class='LGU'>Municipality/LGU1
                      </td>
                      <td  width="20px" class='Barangay'>Barangay1
                      </td>
                      <td  width="30px" class='Project'>Project1
                      </td>
                      <td  width="20px" class='Allocation'>200000
                      </td>
                      <td  width="20px" class='Status'>completed
                      </td>
                      <td  width="5px">100%
                      </td>
                    </tr>
                    <tr>
                      <td width="10px" class='Program'>Program1
                      </td>
                      <td width="10px" class='Year'>2013
                      </td>
                      <td width="20px" class='Province'>Province2
                      </td>
                      <td width="20px" class='LGU'>Municipality/LGU2
                      </td>
                      <td  width="20px" class='Barangay'>Barangay2
                      </td>
                      <td  width="30px" class='Project'>Project2
                      </td>
                      <td  width="20px" class='Allocation'>500000
                      </td>
                      <td  width="20px" class='Status'>ongoing
                      </td>
                      <td  width="5px">50%
                      </td>
                    </tr>
                    <tr>
                      <td width="10px" class='Program'>Program3
                      </td>
                      <td width="10px" class='Year'>2014
                      </td>
                      <td width="20px" class='Province'>Province3
                      </td>
                      <td width="20px" class='LGU'>Municipality/LGU3
                      </td>
                      <td  width="20px" class='Barangay'>Barangay3
                      </td>
                      <td  width="30px" class='Project'>Project3
                      </td>
                      <td  width="20px" class='Allocation'>6000000
                      </td>
                      <td  width="20px" class='Status'>suspended
                      </td>
                      <td  width="5px">0%
                      </td>
                    </tr>
                    <tr>
                      <td width="10px" class='Program'>Program4
                      </td>
                      <td width="10px" class='Year'>2016
                      </td>
                      <td width="20px" class='Province'>Province4
                      </td>
                      <td width="20px" class='LGU'>Municipality/LGU4
                      </td>
                      <td  width="20px" class='Barangay'>Barangay4
                      </td>
                      <td  width="30px" class='Project'>Project4
                      </td>
                      <td  width="20px" class='Allocation'>1000000
                      </td>
                      <td  width="20px" class='Status'>cancelled
                      </td>
                      <td  width="5px">0%
                      </td>
                    </tr>
            </tbody>
            </table>

最佳答案

您在这里可以做的是在您的 status 过滤器中为关键字使用定界符，并在拆分此分隔符后将值作为 array 读取。

下面的代码使用空格作为分隔符，并根据多个值过滤状态列:

let val = this.value;
$rows.hide().filter(function() {
  return $('td', this).filter(cls).filter(function() {
    var content = this.textContent,
      inputVal = $i.filter('.' + this.className).val();

    let vals = val.split(" ").map(function(v) {
      return v.toLowerCase();
    });
    return vals.some(function(v) {
      return content.indexOf(v) > -1;
    });
  }).length === len;
}).show();

注意:

这将仅与 status 列一起使用，我在这里制作了一个完整的工作演示片段。

演示:

var $rows = $('tbody > tr'),
  $filters = $('#filter_table input');

$filters.on("keyup", function() {
  var $i = $filters.filter(function() {
      return $.trim(this.value).length > 0;
    }),
    len = $i.length;

  if (len === 0) return $rows.show();

  var cls = '.' + $i.map(function() {
    return this.className
  }).get().join(',.');

  if (this.id != 'Status') {
    $rows.hide().filter(function() {
      return $('td', this).filter(cls).filter(function() {
        var content = this.textContent,
          inputVal = $i.filter('.' + this.className).val();

        return content.toLowerCase().indexOf(inputVal.toLowerCase()) > -1;

      }).length === len;
    }).show();
  } else {
    let val = this.value;
    $rows.hide().filter(function() {
      return $('td', this).filter(cls).filter(function() {
        var content = this.textContent,
          inputVal = $i.filter('.' + this.className).val();

        let vals = val.split(" ").map(function(v) {
          return v.toLowerCase();
        });
        return vals.some(function(v) {
          return content.indexOf(v) > -1;
        });
      }).length === len;
    }).show();
  }
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<div class="panel panel-default" id="filter_table">
  Input here to Search <br>
  <input type='text' class='Program' id='Program' style="width: 100px;" placeholder="Program" />
  <input type='text' class='Year' id='Year' style="width: 100px;" placeholder="Year" />
  <input type='text' class='Province' id='Province' style="width: 100px;" placeholder="Province" />
  <input type='text' class='LGU' id='LGU' style="width: 100px;" placeholder="LGU" />
  <input type='text' class='Barangay' id='Barangay' style="width: 100px;" placeholder="Barangay" />
  <input type='text' class='Project' id='Project' style="width: 100px;" placeholder="Project" />
  <input type='text' class='Allocation' id='Allocation' style="width: 100px;" placeholder="Allocation" />
  <input type='text' class='Status' id='Status' style="width: 100px;" placeholder="Status" />
</div>

<table border='1' class="table table-hover" id='products'>
  <thead>
    <tr>
      <th width="10px">Program
      </th>
      <th width="10px">Year
      </th>
      <th width="20px">Province
      </th>
      <th width="20px">Municipality/LGU
      </th>
      <th width="20px">Barangay
      </th>
      <th width="30px">Project
      </th>
      <th width="20px">Allocation
      </th>
      <th width="20px">Status
      </th>
      <th width="5px">PA%
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td width="10px" class='Program'>Program1
      </td>
      <td width="10px" class='Year'>2012
      </td>
      <td width="20px" class='Province'>Province1
      </td>
      <td width="20px" class='LGU'>Municipality/LGU1
      </td>
      <td width="20px" class='Barangay'>Barangay1
      </td>
      <td width="30px" class='Project'>Project1
      </td>
      <td width="20px" class='Allocation'>200000
      </td>
      <td width="20px" class='Status'>completed
      </td>
      <td width="5px">100%
      </td>
    </tr>
    <tr>
      <td width="10px" class='Program'>Program1
      </td>
      <td width="10px" class='Year'>2013
      </td>
      <td width="20px" class='Province'>Province2
      </td>
      <td width="20px" class='LGU'>Municipality/LGU2
      </td>
      <td width="20px" class='Barangay'>Barangay2
      </td>
      <td width="30px" class='Project'>Project2
      </td>
      <td width="20px" class='Allocation'>500000
      </td>
      <td width="20px" class='Status'>ongoing
      </td>
      <td width="5px">50%
      </td>
    </tr>
    <tr>
      <td width="10px" class='Program'>Program3
      </td>
      <td width="10px" class='Year'>2014
      </td>
      <td width="20px" class='Province'>Province3
      </td>
      <td width="20px" class='LGU'>Municipality/LGU3
      </td>
      <td width="20px" class='Barangay'>Barangay3
      </td>
      <td width="30px" class='Project'>Project3
      </td>
      <td width="20px" class='Allocation'>6000000
      </td>
      <td width="20px" class='Status'>suspended
      </td>
      <td width="5px">0%
      </td>
    </tr>
    <tr>
      <td width="10px" class='Program'>Program4
      </td>
      <td width="10px" class='Year'>2016
      </td>
      <td width="20px" class='Province'>Province4
      </td>
      <td width="20px" class='LGU'>Municipality/LGU4
      </td>
      <td width="20px" class='Barangay'>Barangay4
      </td>
      <td width="30px" class='Project'>Project4
      </td>
      <td width="20px" class='Allocation'>1000000
      </td>
      <td width="20px" class='Status'>cancelled
      </td>
      <td width="5px">0%
      </td>
    </tr>
  </tbody>
</table>

编辑:

这是一个使用状态过滤器下拉列表的片段:

var $rows = $('tbody > tr'),
  $filters = $('#filter_table input');

$filters.on("keyup", function() {
  var $i = $filters.filter(function() {
      return $.trim(this.value).length > 0;
    }),
    len = $i.length;

  if (len === 0) return $rows.show();

  var cls = '.' + $i.map(function() {
    return this.className
  }).get().join(',.');

  $rows.hide().filter(function() {
    return $('td', this).filter(cls).filter(function() {
      var content = this.textContent,
        inputVal = $i.filter('.' + this.className).val();

      return content.toLowerCase().indexOf(inputVal.toLowerCase()) > -1;

    }).length === len;
  }).show();
});

$("#Status").on("change", function() {

  let val = $(this).val();
  
  $rows.hide().filter(function() {
    return $('td', this).filter(function() {
      var content = this.textContent;
      
      let vals = val.map(function(v) {
        return v.toLowerCase();
      });
      return vals.some(function(v) {
        return content.indexOf(v) > -1;
      });
    }).length >0;
  }).show();

});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<div class="panel panel-default" id="filter_table">
  Input here to Search <br>
  <input type='text' class='Program' id='Program' style="width: 100px;" placeholder="Program" />
  <input type='text' class='Year' id='Year' style="width: 100px;" placeholder="Year" />
  <input type='text' class='Province' id='Province' style="width: 100px;" placeholder="Province" />
  <input type='text' class='LGU' id='LGU' style="width: 100px;" placeholder="LGU" />
  <input type='text' class='Barangay' id='Barangay' style="width: 100px;" placeholder="Barangay" />
  <input type='text' class='Project' id='Project' style="width: 100px;" placeholder="Project" />
  <input type='text' class='Allocation' id='Allocation' style="width: 100px;" placeholder="Allocation" />
  <select multiple class="Status" id="Status" style="width: 100px;">
    <option value="completed">completed</option>
    <option value="ongoing">ongoing</option>
    <option value="suspended">suspended</option>
    <option value="cancelled">cancelled</option>
  </select>
</div>

<table border='1' class="table table-hover" id='products'>
  <thead>
    <tr>
      <th width="10px">Program
      </th>
      <th width="10px">Year
      </th>
      <th width="20px">Province
      </th>
      <th width="20px">Municipality/LGU
      </th>
      <th width="20px">Barangay
      </th>
      <th width="30px">Project
      </th>
      <th width="20px">Allocation
      </th>
      <th width="20px">Status
      </th>
      <th width="5px">PA%
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td width="10px" class='Program'>Program1
      </td>
      <td width="10px" class='Year'>2012
      </td>
      <td width="20px" class='Province'>Province1
      </td>
      <td width="20px" class='LGU'>Municipality/LGU1
      </td>
      <td width="20px" class='Barangay'>Barangay1
      </td>
      <td width="30px" class='Project'>Project1
      </td>
      <td width="20px" class='Allocation'>200000
      </td>
      <td width="20px" class='Status'>completed
      </td>
      <td width="5px">100%
      </td>
    </tr>
    <tr>
      <td width="10px" class='Program'>Program1
      </td>
      <td width="10px" class='Year'>2013
      </td>
      <td width="20px" class='Province'>Province2
      </td>
      <td width="20px" class='LGU'>Municipality/LGU2
      </td>
      <td width="20px" class='Barangay'>Barangay2
      </td>
      <td width="30px" class='Project'>Project2
      </td>
      <td width="20px" class='Allocation'>500000
      </td>
      <td width="20px" class='Status'>ongoing
      </td>
      <td width="5px">50%
      </td>
    </tr>
    <tr>
      <td width="10px" class='Program'>Program3
      </td>
      <td width="10px" class='Year'>2014
      </td>
      <td width="20px" class='Province'>Province3
      </td>
      <td width="20px" class='LGU'>Municipality/LGU3
      </td>
      <td width="20px" class='Barangay'>Barangay3
      </td>
      <td width="30px" class='Project'>Project3
      </td>
      <td width="20px" class='Allocation'>6000000
      </td>
      <td width="20px" class='Status'>suspended
      </td>
      <td width="5px">0%
      </td>
    </tr>
    <tr>
      <td width="10px" class='Program'>Program4
      </td>
      <td width="10px" class='Year'>2016
      </td>
      <td width="20px" class='Province'>Province4
      </td>
      <td width="20px" class='LGU'>Municipality/LGU4
      </td>
      <td width="20px" class='Barangay'>Barangay4
      </td>
      <td width="30px" class='Project'>Project4
      </td>
      <td width="20px" class='Allocation'>1000000
      </td>
      <td width="20px" class='Status'>cancelled
      </td>
      <td width="5px">0%
      </td>
    </tr>
  </tbody>
</table>

希望它能满足您的需求。

关于javascript - 筛选具有多个值的表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50694402/

上一篇：javascript - 谷歌图表 - 每个图表都有隐藏线的多个折线图数据表

下一篇：javascript - 通过 onclick 事件调用 php 函数？

相关文章：

php - 提交表单数据后，页面未在 laravel 中正确加载

javascript - 拆分字符串后在 Javascript 函数中返回数组

javascript - 从邮政编码谷歌地理编码获取城市名称

javascript - 递归地展平数组(不循环)javascript

javascript - 如何将其传递到 jquery .change 事件中

jquery - 在 Jquery 弹出窗口中显示加载微调器

php - 如果从数据库端检查的验证是正确的，如何在 PHP 中隐藏表单提交的分区？

php - Laravel 没有将样式表添加到头部，而是添加到主体

javascript - 我可以从 ServiceWorker 中的外部 JS 文件调用方法吗？

javascript - 在 highchart 系列的点击事件中使用带有参数的 symfony 路由

©2024 IT工具网  联系我们