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

时间：2015-01-21 09:45:51

标签： javascript html events html-table

我是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的记录，并且应该过滤掉休息。

4 个答案:

答案 0 :(得分：4)

如果您正在寻找基于jQuery的解决方案，我已经掀起了一个解决方案。代码的逻辑非常简单：只要在任何复选框上检测到change事件，我们就会触发过滤功能，但需要注意：

  • 如果没有选中复选框，我们会显示所有表格行，但
  • 如果选中一个或多个，我们继续进行过滤

对于过滤功能：

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

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

答案 1 :(得分：1)

你需要使用Javascript，这是一个使用jQuery库的原始工作示例：http://jsfiddle.net/zn8ocm43/1/

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

要隐藏行，您可以使用

为其添加css类 
display:none

此外，最好使用thead和tbody标记将标题行与数据行分开：http://www.w3schools.com/tags/tag_thead.asp

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

答案 2 :(得分：1)

我不知道我是否正确，但我认为他想要按列过滤。 如果那是他正在寻找的东西，这里是纯js的快速脚本：

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

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

	return arr;
}

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

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

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

document.querySelector('button').addEventListener('click', function () {
	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>

答案 3 :(得分：0)

您也可以使用jquery

以其他方式执行此操作

＆＃13;
＆＃13; 
$(function(){
			$("input[type='checkbox']").change(function(){
				$("table tr td:first-child").each(function(){
					$(this).closest('tr').removeClass("hideCls");
				});
				var chBoxVal=$(this).attr("value");
				$("table tr td:first-child").each(function(){
					if($(this).text()==chBoxVal)
						$(this).closest('tr').addClass("showCls");
					else
						$(this).closest('tr').addClass("hideCls");
				});
			});
		});
＆＃13; 
.hideCls{
			display:none;
		}
.showCls{
			display:table-row;
		}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题