如何根据值过滤行？

Question

这是我之前的问题。

How to filter records by clicking div array?

我有一个 table，它的 ID 作为最后一列，在单击 ID 时，我需要过滤第二行 table（只是为了保留与 [=20= 的 ID 匹配的记录） ]1) 并过滤其他。

<!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并为每一行定义函数，但是我的tables可能有数百万行所以不可能手动完成。如何实现自动化？

Answer 1

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

把id放在第一个table :

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

并在第一个 table 中编辑包含 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);

如果您在第二个 table 中存储了很多 ID 和很多行，这不是很高效。我希望你能理解 :)。

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

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

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

如何根据值过滤行？

How to filter rows based on value?

html

jquery

html-table

filter