如何根据按键过滤记录？ [英] how to filter records based on key click?

查看：142
本文介绍了如何根据按键过滤记录？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我是C ++程序员和新手JS。我试图基于点击事件过滤表。我有下表。如何保存基于点击键和过滤其他记录的记录。 

 <！DOCTYPE html> 
< html> 
< body> 
 
< table border = 1 cellspacing =1cellpadding =1style =width：100％> 
< tr>< th> ID< / th>< th>名称< / th>< th>标记< / 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 =checkboxname =vehiclevalue =22> 22℃峰; br> 
< input type =checkboxname =vehiclevalue =23> 23< br> 
< input type =checkboxname =vehiclevalue =24> 24 LT峰; br> 
< input type =checkboxname =vehiclevalue =25> 25< br> 
< input type =checkboxname =vehiclevalue =29> 29 LT峰; br> 
< input type =checkboxname =vehiclevalue =45> 45< br> 
 
< / body> 
< / html>

在上面的例子中，如果我点击23只应该显示id 23的记录，休息应该是过滤掉

解决方案

如果您正在寻找基于jQuery的解决方案，我已经打了一个。代码的逻辑非常简单：每当在任何复选框上检测到更改事件时，我们将触发过滤功能，并提示：




  • 如果没有选中复选框，我们会显示所有表格行，但是如果选中一个或多个，则

  • ，我们继续过滤



对于过滤功能：


  1. 我们首先隐藏所有的表行。

  2. 然后，我们将所有复选框的值映射到数组，例如 vals 。这可以通过使用 .map（） ，它返回每个元素的值。在之后，我们链接 .get（） .map（）以检索数组。

  3. 使用 .filter（） 功能来比较每个表行的第一个表格单元格中的文本节点，以查看是否文本节点匹配数组中的任何一个元素。 

  $（function（）{$（'input [type =checkbox]'）。change（function（）{//我们检查是否选择了一个或多个复选框//如果选择了一个或多个复选框，我们执行过滤if（$（'input [type =checkbox]：checked'）。length> 0）{//获取值所有复选框var vals = $（'input [type =checkbox]：checked '）.map（function（）{return this.value;}）。get（）; //这里我们对表行//做两件事我们隐藏所有// 2.然后我们过滤，显示那些值在第一个< td>匹配复选框值$（'table tr'）.hide（）// 1 .filter（function（）{// 2 return vals.indexOf（$（this）.find（'td：first' ）.text（））> -1;}）。show（）;} else {//显示一个ll $（'table tr'）。show（）; }}）;}）;  

 < script src = msgstr=1风格= 宽度：100％ >< TR><的第i; ID< /第><的第i;姓名< /第><的第i;标记< /第>< / TR> < TR> < TD> 22℃; / TD> < TD> Smith和LT; / TD> < TD> 50℃; / TD> < / TR> < TR> < TD> 23℃; / TD> < TD>杰克逊< / TD> < TD> 94℃; / TD> < / TR> < TR> < TD> 45℃; / TD> < TD> Doe的LT; / TD> < TD> 80℃; / TD> < / TR>< TR> < TD> 24< / TD> < TD> Doe的LT; / TD> < TD> 80℃; / TD> < / TR>< TR> < TD> 25℃; / TD> < TD> Doe的LT; / TD> < TD> 80℃; / TD> < / TR>< TR> < TD> 29< / TD> < TD> Doe的LT; / TD> < TD> 80℃; / TD> < / tr>< / table>< input type =checkboxname =vehiclevalue =22> 22< br>< input type =checkboxname =vehiclevalue =23> 23< br>< input type =checkboxname =vehiclevalue =24> 24< br>< input type =checkboxname =vehiclevalue =25> 25< br>< input type =checkboxname =vehiclevalue =29> 29< br>< input type =checkboxname =vehiclevalue =45> 45< br>


I am C++ programmer and newbie to JS. I am trying to filter table based on click event. I have following table. How can i keep records based on clicking keys and filtering other records. 

<!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>

In the above example if i click on 23 only record with id 23 should be displayed and rest should be filtered out.

解决方案

If you're looking for a jQuery-based solution, I have whipped up one. The logic of the code is pretty simple: we trigger the filtering function whenever a change event is detected on any of the checkboxes, with a caveat:

  • if no checkboxes are checked, we show all table rows, but
  • if one or more are checked, we proceed with the filtering

For the filtering function:

  1. We first hide all table rows.
  2. Then, we map all the values of checked checkboxes into an array, say vals. This is done by using .map(), which returns the value of each element. We chain .get() after .map() in order to retrieve the array.
  3. Use the .filter() function to compare the text node in each of the table row's first table cell, to see if the text node matches any one of the elements in the array. If it does, we return them and show them.

$(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>

这篇关于如何根据按键过滤记录？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆