jQuery 表格行按列过滤

Question

我正在尝试以一种智能的方式过滤表行（而不是最终完成工作的大量代码），但灵感相当枯燥。

我的表中有 5 列。每个顶部都有一个下拉列表或一个文本框，用户可以使用它来过滤表格数据（基本上隐藏不适用的行）

有很多用于 jQuery 的表格过滤插件，但没有一个能像这样工作，这就是复杂的部分：|

Answer 1

这可能不是最好的方法，而且我不确定性能，但一个选项是使用以列标识符开头的 id 标记每一列（在每一行中），然后是唯一的记录标识符之类的数字。

例如，如果您有一列 Produce Name，并且记录 ID 为 763，我会执行以下操作：

​​<table id="table1">
    <thead>
        <tr>
            <th>Artist</th>
            <th>Album</th>
            <th>Genre</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td id="artist-127">Red Hot Chili Peppers</td>
            <td id="album-195">Californication</td>
            <td id="genre-1">Rock</td>
            <td id="price-195">$8.99</td>
        </tr>
        <tr>
            <td id="artist-59">Santana</td>
            <td id="album-198">Santana Live</td>
            <td id="genre-1">Rock</td>
            <td id="price-198">$8.99</td>
        </tr>
        <tr>
            <td id="artist-120">Pink Floyd</td>
            <td id="album-183">Dark Side Of The Moon</td>
            <td id="genre-1">Rock</td>
            <td id="price-183">$8.99</td>
        </tr>
    </tbody>
</table>

然后您可以使用 jQuery 根据 id 的开头进行过滤。

例如，如果您想按艺术家列进行过滤：

var regex = /Hot/;
$('#table1').find('tbody').find('[id^=artist]').each(function() {
    if (!regex.test(this.innerHTML)) {
        this.parentNode.style.backgroundColor = '#ff0000';
    }
});

Answer 2

这是一个基本的过滤器示例http://jsfiddle.net/urf6P/3/

它使用 jquery 选择器 :contains('some text') 和 :not(:contains('some text')) 来决定是显示还是隐藏每一行。这可能会让你朝着一个方向前进。

已编辑以包含来自 jsfiddle 的 HTML 和 javascript：

$(function() {    
    $('#filter1').change(function() { 
        $("#table td.col1:contains('" + $(this).val() + "')").parent().show();
        $("#table td.col1:not(:contains('" + $(this).val() + "'))").parent().hide();
    });

});

Answer 3

step:1在.html文件中写入以下内容

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">

<table id="myTable">
  <tr class="header">
    <th style="width:60%;">Name</th>
    <th style="width:40%;">Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>Germany</td>
  </tr>
</table>

step:2在.js文件中写入以下内容

function myFunction() {
  // Declare variables 
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    } 
  }
}

Answer 4

略微增强了 Jeff Treuting 发布的 accepted solution，过滤功能可以扩展为不区分大小写。我不相信原始解决方案甚至增强功能。增强的想法来自Highway of Life提供的a solution posted on a different SO post。

这里是：

// Define a custom selector icontains instead of overriding the existing expression contains
// A global js asset file will be a good place to put this code
$.expr[':'].icontains = function(a, i, m) {
  return $(a).text().toUpperCase()
      .indexOf(m[3].toUpperCase()) >= 0;
};

// Now perform the filtering as suggested by @jeff
$(function() {    
    $('#filter1').on('keyup', function() {  // changed 'change' event to 'keyup'. Add a delay if you prefer
        $("#table td.col1:icontains('" + $(this).val() + "')").parent().show();  // Use our new selector icontains
        $("#table td.col1:not(:icontains('" + $(this).val() + "'))").parent().hide();  // Use our new selector icontains
    });

});