Question

这是指我之前提出的问题。

How to filter records by clicking div array?

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

<!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并为每一行定义函数，但我的表可能有数百万行，因此无法手动完成。如何自动化？

Answer 1

据我了解，当用户点击第一个表的列ID时，它会过滤第二个表，只显示存储在点击的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并且第二个表中有很多行，则这不是非常高效。我希望你理解:)。

那我在这做什么： -attach事件处理程序到第一个表中的每个（我通过事件委托来做到这一点，如果你有很多元素并希望在每个人身上附加事件，这是一个很好的做法，see this以获取更多信息。）

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

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

如何根据值过滤行？

1 个答案: