如何根据值过滤行？答案

【问题标题】：How to filter rows based on value?如何根据值过滤行？
【发布时间】：2015-03-24 20:56:26
【问题描述】：

这是指我之前的问题。

How to filter records by clicking div array?

我有一个表，其 ids 作为最后一列，在单击 ids 时，我需要过滤第二个表的行（只是为了保留与 table1 的 ids 匹配的记录）并过滤其他表。

<!DOCTYPE html>
<html>
<body>

<table border=1 style="width:100%">
<th>Col1</th><th>Col2</th><th>Ids</th>
  <tr>
    <td>Jill</td>
    <td>Book</td>       
    <td>50,23,34</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Cook</td>       
    <td>94,23,45,23</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Teacher</td>        
    <td>80,12,34,45</td>
  </tr>
  <tr>
    <td>Ram</td>
    <td>Miner</td>      
    <td>50,56,67,45</td>
  </tr>
  <tr>
    <td>Raj</td>
    <td>Engineer</td>       
    <td>94,23,12,34,56,23</td>
  </tr>
  <tr>
    <td>Gav</td>
    <td>Principal</td>      
    <td>80,67,89,45,23,12</td>
  </tr>
</table>


<br><br>

<B>Index Table</B>
<br>

<table id="dataTable" border =1 cellspacing="1" cellpadding="1" style="width:100%">
<tr><th>Ids</th><th>Class</th><th>Marks</th></tr>
  <tr>
    <td>12</td>
    <td>Class1</td> 
    <td>250</td>
  </tr>
  <tr>
    <td>23</td>
    <td>Class2</td> 
    <td>294</td>
  </tr>
 <tr>
    <td>24</td>
    <td>Class3</td> 
    <td>250</td>
  </tr>
  <tr>
    <td>34</td>
    <td>Class1</td> 
    <td>294</td>
  </tr>
 <tr>
    <td>50</td>
    <td>Class1</td> 
    <td>250</td>
  </tr>
  <tr>
    <td>45</td>
    <td>Class3</td> 
    <td>294</td>
  </tr>
 <tr>
    <td>23</td>
    <td>Class1</td> 
    <td>250</td>
  </tr>
  <tr>
    <td>67</td>
    <td>Class2</td> 
    <td>294</td>
  </tr>
 <tr>
    <td>89</td>
    <td>Class2</td> 
    <td>250</td>
  </tr>
<tr>
    <td>80</td>
    <td>Class1</td> 
    <td>250</td>
  </tr>
  <tr>
    <td>94</td>
    <td>Class1</td> 
    <td>294</td>
  </tr>
 <tr>
    <td>56</td>
    <td>Class1</td> 
    <td>250</td>
  </tr>
</table>
</body>
</html>

在上一个问题中，每次我需要为每一行分配函数 ID 并为每一行定义函数，但我的表可能有数百万行，因此无法手动完成。如何实现自动化？

【问题讨论】：

标签： jquery html filter html-table

【解决方案1】：

据我了解，当用户单击第一个表的列 ID 中的 a 时，它会过滤第二个表，仅显示存储在单击的 div 中的 id。

把id放在第一张桌子上：

<table id="first-table" border="1" style="width:100%">

并在第一个表中编辑包含 id 的 TD：

<td id="td-containing-ids">id1,id2,id3</td>

（我在这里建议使用 css 而不是过时的 html 语法和内联样式）

这应该可行：

// checks if 'value' is in 'array' 
function isInArray(value, array) {
  return array.indexOf(value) > -1;
}

// will select rows based on the text attribute og this
// in 'this' will be stored the <td> you just clicked
function selectRows() {

    // get the ids in a string
    var ids = $(this).text().split(',');
    var display; // a little trick to avoid more code

    // iterate through every row of the second table
    // this is not a very optimal way to do it, but you get it ;)
    $('#dataTable tr td:first-child').each(function(){

        // in 'this' is stored the first <td> of the second table(of each row, of course)
        if( isInArray( $(this).text(), ids ) ) {
            // this means the id is found in the 'ids' array
            display = 'block'; //or whatever suits you here
        }
        else {
            // this means the id of the row is not in the 'ids' array
            display = 'none'
        }
        $(this).parent().css('display', display);
    });

}
// use event delegation when you have a bunch of elements
$('#first-table').on('click', '#td-containing-ids', selectRows);

如果您在第二个表中存储了很多 id 和很多行，那么这不是很有效。我希望你理解它:)。

那么我在这里做什么： -将事件处理程序附加到第一个表中的每个（我通过事件委托来做到这一点，如果您有很多元素并且想为每个人附加事件，这是一个很好的做法，see this 了解更多信息。）

从点击中获取文本
我们刚刚得到的文本实际上是我们想要在第二张桌子上显示的 ID
我们将它们放在一个数组中
我们逐行遍历第二个表
我们从 id 获取文本（从第二行开始）
如果此 id 在我们的第一个数组中，则该行可见（通过显示：block/table-row）
如果这个 id 不在我们的第一个数组中，则该行不可见（通过显示：无）

我的代码中的错误： - 我们每次点击都会遍历第一个表，它的每一行，所以在每次用户交互时，jQuery 都必须遍历 DOM ......如果你在第二个表中有很多行，这不好。如果页面加载后不添加第二个表中的其他行，则可以在运行时从第二个表中获取行并将它们存储在数组中（仅 DOM 对象的引用及其 ID）

【讨论】：

@user15662 这里的错误是我写的不是 $(this) 而不是 .parent().css(...) 我写的是 .parent().style(.. ）。我的错。我在我的代码笔上做了一支笔 (link)
@uer15662 我编辑了我的答案，纠正了我之前评论中刚刚提到的错误，并添加了一些解释，还有额外的好处:)
@user15662 当然可以。我将编辑我的代码笔。在那之前，我有一些问题。您是否在页面加载后向第二个表添加 ID 或行？你有那么多id吗？
我编辑了。您在第一句话中所说的并不意味着您添加更多行，只是将它们全部显示出来。如果你有那么多行而不是缓存第一个表中的行是必须的！更新了我的代码笔。通知您是否有优化问题:)
让我们continue this discussion in chat.