如何根据按键点击过滤记录？

我是C++程序员，也是JS的新手。我试图根据点击事件来过滤表格。我有下表。我如何根据点击键和过滤其他记录来保存记录。如何根据按键点击过滤记录？

<!DOCTYPE html> 
<html> 
<body> 

<table border =1 cellspacing="1" cellpadding="1" style="width:100%"> 
<tr><th>ID</th><th>Name</th><th>Marks</th></tr> 
    <tr> 
    <td>22</td> 
    <td>Smith</td>  
    <td>50</td> 
    </tr> 
    <tr> 
    <td>23</td> 
    <td>Jackson</td>   
    <td>94</td> 
    </tr> 
    <tr> 
    <td>45</td> 
    <td>Doe</td>   
    <td>80</td> 
    </tr> 
<tr> 
    <td>24</td> 
    <td>Doe</td>   
    <td>80</td> 
    </tr> 
<tr> 
    <td>25</td> 
    <td>Doe</td>   
    <td>80</td> 
    </tr> 
<tr> 
    <td>29</td> 
    <td>Doe</td>   
    <td>80</td> 
    </tr> 
</table> 

<input type="checkbox" name="vehicle" value="22"> 22<br> 
<input type="checkbox" name="vehicle" value="23"> 23 <br> 
<input type="checkbox" name="vehicle" value="24"> 24<br> 
<input type="checkbox" name="vehicle" value="25"> 25 <br> 
<input type="checkbox" name="vehicle" value="29"> 29<br> 
<input type="checkbox" name="vehicle" value="45"> 45 <br> 

</body> 
</html>

在上面的例子中，如果我点击23只应该显示ID为23的记录，应该过滤掉其余部分。

来源

2015-01-21 Manish

你是否愿意接受一个基于jQuery的解决方案？ – Terry 2015-01-21 09:52:20

如果你正在寻找一个基于jQuery的解决方案，我掀起了一个。代码的逻辑非常简单：我们触发，只要在任何复选框检测到change事件过滤功能，一个警告：

如果没有复选框被选中，我们将展示所有的表行，但
如果一个或多个检查，我们着手进行过滤

对于过滤功能：

我们首先可以隐藏所有的表行。
然后，我们将选中的复选框的所有值映射到一个数组中，比如vals。这是通过使用.map()来完成的，它返回每个元素的值。我们连锁.get() after .map() in order to retrieve the array。
使用.filter()函数来比较每个表行的第一个表格单元格中的文本节点，以查看文本节点是否与数组中的任何一个元素匹配。如果确实如此，我们将它们退还给他们看。

$(function() { 
 
    $('input[type="checkbox"]').change(function() { 
 
    // We check if one or more checkboxes are selected 
 
    // If one or more is selected, we perform filtering 
 
    if($('input[type="checkbox"]:checked').length > 0) { 
 
     // Get values all checked boxes 
 
     var vals = $('input[type="checkbox"]:checked').map(function() { 
 
     return this.value; 
 
     }).get(); 
 

 
     // Here we do two things to table rows 
 
     // 1. We hide all 
 
     // 2. Then we filter, show those whose value in first <td> matches checkbox value 
 
     $('table tr') 
 
     .hide() // 1 
 
     .filter(function() { // 2 
 
     return vals.indexOf($(this).find('td:first').text()) > -1; 
 
     }).show(); 
 
    } else { 
 
     // Show all 
 
     $('table tr').show(); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table border =1 cellspacing="1" cellpadding="1" style="width:100%"> 
 
<tr><th>ID</th><th>Name</th><th>Marks</th></tr> 
 
    <tr> 
 
    <td>22</td> 
 
    <td>Smith</td>  
 
    <td>50</td> 
 
    </tr> 
 
    <tr> 
 
    <td>23</td> 
 
    <td>Jackson</td>   
 
    <td>94</td> 
 
    </tr> 
 
    <tr> 
 
    <td>45</td> 
 
    <td>Doe</td>   
 
    <td>80</td> 
 
    </tr> 
 
<tr> 
 
    <td>24</td> 
 
    <td>Doe</td>   
 
    <td>80</td> 
 
    </tr> 
 
<tr> 
 
    <td>25</td> 
 
    <td>Doe</td>   
 
    <td>80</td> 
 
    </tr> 
 
<tr> 
 
    <td>29</td> 
 
    <td>Doe</td>   
 
    <td>80</td> 
 
    </tr> 
 
</table> 
 

 
<input type="checkbox" name="vehicle" value="22"> 22<br> 
 
<input type="checkbox" name="vehicle" value="23"> 23 <br> 
 
<input type="checkbox" name="vehicle" value="24"> 24<br> 
 
<input type="checkbox" name="vehicle" value="25"> 25 <br> 
 
<input type="checkbox" name="vehicle" value="29"> 29<br> 
 
<input type="checkbox" name="vehicle" value="45"> 45 <br>

来源

2015-01-21 10:02:18 Terry

你需要做的是使用JavaScript，在这里使用jQuery库中的原始工作示例：http://jsfiddle.net/zn8ocm43/1/

的想法是，当你点击该行你触发Javascript函数隐藏所有其他行，当您再次单击所选行时，其他行将再次显示。

要隐藏行，你可以添加一个CSS类将其与

display:none

此外，它会使用THEAD和TBODY标签是更好地从数据行单独的标题行：http://www.w3schools.com/tags/tag_thead.asp

如果您愿意使用jQuery，你可以找到为你做所有工作的插件。

来源

2015-01-21 10:09:54 user1498339

您可以通过另一种方式过使用jQuery

$(function(){ 
 
\t \t \t $("input[type='checkbox']").change(function(){ 
 
\t \t \t \t $("table tr td:first-child").each(function(){ 
 
\t \t \t \t \t $(this).closest('tr').removeClass("hideCls"); 
 
\t \t \t \t }); 
 
\t \t \t \t var chBoxVal=$(this).attr("value"); 
 
\t \t \t \t $("table tr td:first-child").each(function(){ 
 
\t \t \t \t \t if($(this).text()==chBoxVal) 
 
\t \t \t \t \t \t $(this).closest('tr').addClass("showCls"); 
 
\t \t \t \t \t else 
 
\t \t \t \t \t \t $(this).closest('tr').addClass("hideCls"); 
 
\t \t \t \t }); 
 
\t \t \t }); 
 
\t \t });

.hideCls{ 
 
\t \t \t display:none; 
 
\t \t } 
 
.showCls{ 
 
\t \t \t display:table-row; 
 
\t \t }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<table border =1 cellspacing="1" cellpadding="1" style="width:100%"> 
 
<tr><th>ID</th><th>Name</th><th>Marks</th></tr> 
 
    <tr> 
 
    <td>22</td> 
 
    <td>Smith</td>  
 
    <td>50</td> 
 
    </tr> 
 
    <tr> 
 
    <td>23</td> 
 
    <td>Jackson</td>   
 
    <td>94</td> 
 
    </tr> 
 
    <tr> 
 
    <td>45</td> 
 
    <td>Doe</td>   
 
    <td>80</td> 
 
    </tr> 
 
<tr> 
 
    <td>24</td> 
 
    <td>Doe</td>   
 
    <td>80</td> 
 
    </tr> 
 
<tr> 
 
    <td>25</td> 
 
    <td>Doe</td>   
 
    <td>80</td> 
 
    </tr> 
 
<tr> 
 
    <td>29</td> 
 
    <td>Doe</td>   
 
    <td>80</td> 
 
    </tr> 
 
</table> 
 

 
<input type="checkbox" name="vehicle" value="22"> 22<br> 
 
<input type="checkbox" name="vehicle" value="23"> 23 <br> 
 
<input type="checkbox" name="vehicle" value="24"> 24<br> 
 
<input type="checkbox" name="vehicle" value="25"> 25 <br> 
 
<input type="checkbox" name="vehicle" value="29"> 29<br> 
 
<input type="checkbox" name="vehicle" value="45"> 45 <br>

来源

2015-01-21 10:27:03

但是，如果你检查多个复选框，一切都隐藏起来。 – Terry 2015-01-21 10:32:14

我已经更新了代码，请检查它。 – 2015-01-21 11:00:59

是否可以通过传递数组（ids）来单击div元素来做同样的事情？ – Manish 2015-01-22 11:31:30

我不知道如果我这样做是正确做到这一点，但我认为他是想按列进行筛选。如果这就是他的搜索，这里是纯JS一个快速脚本：

function NodeListToArray (nodeList) { 
 
\t var arr = []; 
 

 
\t for (var i = nodeList.length >>> 0; i--;) 
 
\t \t arr[i] = nodeList[i]; 
 

 
\t return arr; 
 
} 
 

 
function filter (rows, columnIndex) { 
 
\t rows.forEach(function (row, i) { 
 
\t \t for (var k = 0; k < rows[i].children.length; k++) { 
 
\t \t \t if (k === columnIndex || !~columnIndex) 
 
\t \t \t \t rows[i].children[k].style.visibility = 'initial'; 
 
\t \t \t else 
 
\t \t \t \t rows[i].children[k].style.visibility = 'hidden'; 
 
\t \t } 
 
\t }); 
 
} 
 

 
var rows = NodeListToArray(document.querySelectorAll('tr')); 
 

 
for (var i = 0; i < rows[0].children.length; i++) { 
 
\t rows[0].children[i].addEventListener('click', function (index, e) { 
 
\t \t filter(rows, index); 
 
\t }.bind(null, i)); 
 
} 
 

 
document.querySelector('button').addEventListener('click', function() { 
 
\t filter(rows, -1); 
 
});

<table border =1 cellspacing="1" cellpadding="1" style="width:100%"> 
 
<tr><th>ID</th><th>Name</th><th>Marks</th></tr> 
 
    <tr> 
 
    <td>22</td> 
 
    <td>Smith</td>  
 
    <td>50</td> 
 
    </tr> 
 
    <tr> 
 
    <td>23</td> 
 
    <td>Jackson</td>   
 
    <td>94</td> 
 
    </tr> 
 
    <tr> 
 
    <td>45</td> 
 
    <td>Doe</td>   
 
    <td>80</td> 
 
    </tr> 
 
<tr> 
 
    <td>24</td> 
 
    <td>Doe</td>   
 
    <td>80</td> 
 
    </tr> 
 
<tr> 
 
    <td>25</td> 
 
    <td>Doe</td>   
 
    <td>80</td> 
 
    </tr> 
 
<tr> 
 
    <td>29</td> 
 
    <td>Doe</td>   
 
    <td>80</td> 
 
    </tr> 
 
</table> 
 

 
<button>Show All</button>

来源

2015-01-21 10:32:49

如何根据按键点击过滤记录？

回答

相关问题